Question

我有一个div，其中有视频URL列表，我需要动态添加播放图标，而在播放视频时，我需要将其删除。单击另一个视频并将其添加到该视频。但是单击其他按钮后，我无法将其删除。

这是到目前为止我尝试过的html和脚本，

TextField

任何人都可以帮助我解决这个问题吗？

预先感谢！

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>');

Answer 2

尝试以下代码

IsNumber

点击视频后动态添加和删除图标

2 个答案: