У меня есть div, где у меня есть список URL видео, и мне нужно динамически добавить значок воспроизведения, пока видео воспроизводится, и мне нужно удалить его. Пока другое видео нажимается и добавляется к этому видео. Но я не могу удалить его, пока нажата другая.
Вот мой HTML и сценарий, что я пробовал до сих пор,
<div class="myDiv" >
<ul>
<li class="videoList" id="item-0" >
<div class="row" href="#video1">
<div>
<img class="ImagContent">
</div>
<div>
<label class="myClass">Text</label>
</div>
</div>
</li>
<li class="videoList" id="item-1" >
<div class="row" href="#video1">
<div>
<img class="ImagContent">
</div>
<div>
<label class="myClass">Text</label>
</div>
</div>
</li>
</ul>
</div>
$('.myDiv').click(function () {
var id=$(this).attr('id')
$('#'+id).find('.myclass').append('<i style="font-size:24px" class="fa"></i>');
});
Кто-нибудь может помочь мне решить эту проблему?
Заранее спасибо!!
2 ответа
/*$(".videoList").click(function () {
$('.videoList').find('.myClass').html(""); // remove icon from myClass
$(this).find('.myClass').append('<i style="font-size:24px" class="fa"></i>'); // append icon
});*/
$(document).on('click',".videoList",function(e) {
e.preventDefault();
$('.videoList').find('.myClass').html(""); // remove icon from myclass
$(this).find('.myClass').append('<i style="font-size:24px" class="fa"></i>'); // append icon
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<div class="myDiv" >
<ul>
<li class="videoList" id="item-0" >
<div class="row" href="#video1">
<div>
<img class="ImagContent">Image 1
</div>
<div>
<label class="myClass">Text</label>
</div>
</div>
</li>
<li class="videoList" id="item-1" >
<div class="row" href="#video1">
<div>
<img class="ImagContent">Image 2
</div>
<div>
<label class="myClass">Text</label>
</div>
</div>
</li>
</ul>
</div>
</form>
Попробуйте следующее
$('.videoList').click(function () {
$('.videoList').find('.myClass').html(); // remove icon from myclass
$(this).find('.myClass').append('<i style="font-size:24px" class="fa"></i>'); // append icon
});
Вы также можете использовать функцию HTML
$(this).find('.myClass').html('<i style="font-size:24px" class="fa"></i>');
Попробуйте следующий код
$('.videoList').click(function () {
var id=$(this).attr('id');
$('.myclass').html('text'); // set default value for all
$('#'+id).find('.myClass').append('<i style="font-size:24px" class="fa"></i>'); // append icon to myClass
});
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.