Динамическое добавление и удаление значка при нажатии на видео
У меня есть 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>');
});
Кто-нибудь может помочь мне решить эту проблему?
Заранее спасибо!!
После щелчка по самому элементу div должно воспроизводиться видео и отображаться значок.
Ваш вопрос не снят. где ссылка на видео? вы хотите добавить значок перед ним. Пожалуйста, добавьте html с несколькими видео. Если вы не хотите показывать URL, просто напишите video_url1, video_url2. Так что я могу легко помочь вам.
Еще раз отредактировал. @Йогендра
Ответы 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').find('.myclass').html("Text");
На самом деле я использовал ваш js-скрипт. В html имя вашего класса «myClass», а в коде javascript вы используете «myclass». Я проверил это, теперь оно работает. Я дал вам 2 сценария. оба будут работать 1 прокомментирован другой нет
Попробуйте следующий код
$('.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
});
Вы хотите выполнять действие, когда кто-то нажимает на элемент li?