Добавляйте и удаляйте значок динамически при нажатии на видео

Question

У меня есть 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">&#xf144;</i>');
});

Кто-нибудь может помочь мне решить эту проблему?

Заранее спасибо!!

jquery

1

Alisa 30 Май 2019 в 08:23

Answer 1

/*$(".videoList").click(function () {

  $('.videoList').find('.myClass').html(""); // remove icon from  myClass
    $(this).find('.myClass').append('<i style="font-size:24px" class="fa">&#xf144;</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">&#xf144;</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">&#xf144;</i>'); // append icon 
});

Вы также можете использовать функцию HTML

$(this).find('.myClass').html('<i style="font-size:24px" class="fa">&#xf144;</i>');

2

Yogendra 30 Май 2019 в 10:56

Answer 2

Попробуйте следующий код

$('.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">&#xf144;</i>'); // append icon to myClass 
});

1

Priyanka Giri 30 Май 2019 в 06:44

Добавляйте и удаляйте значок динамически при нажатии на видео

2 ответа

Похожие вопросы

Новые вопросы

jquery