javascript - 删除附加的内容并在单击时添加其他内容

Question

我有一个 Li 的列表，点击后会有一个 plSel 类，点击后，我希望他们播放不同的视频，而其他视频则清除

这是我在 html 上的写法:

<div class="fullscreen-bg">
    <video id="appendVid" loop muted autoplay poster="assets/one.png" class="fullscreen-bg__video">

    </video>
</div>

后来 lis 看起来像这样:

 <li id="numb01"></li>
 <li id="numb02"></li>
 <li id="numb03"></li>
 <li id="numb04" class="plSel"></li> //whenclicked

到目前为止，这就是我布置 JS 的方式，问题是当它超过一个时，它就无法工作了

    $(document).ready(function(){

  if ($('#numb01').hasClass('plSel')) {
    $('#appendVid').append('<source src="assets/one.mp4" type="video/mp4"><source src="assets/one.ogv" type="video/ogg">');
});

我如何继续删除附加的内容并为每个视频附加下一个每个视频都会附加类似这样的内容 <source src="assets/two.mp4" type="video/mp4"><source src="assets/two.ogv" type="video/ogg">

谢谢你的帮助

Answer 1

很难将它们配对，因为那里需要语法。我的意思是类 one 和 numb01。如果您更好地保留这些命名约定，可能会更好。如果您仍未修改它们，至少您应该将它们收集在一个范围内。就像 li 总是将 ul 作为他们的 parent 一样。

如果视频和列表的位置顺序正确，这里我使用 jQuery index找到它的位置，然后显示它并收集它的siblings元素然后隐藏它们。然后通过找到的索引找到要显示的视频，隐藏它的 sibling ，就这样。

我还在此处展示了如果您可以使用更好的命名约定存储相关选择器，您将如何更轻松地获得它。这里的示例使用按钮上的 data- 属性来关联目标 li 可见性。

$(function () {
  var index = $('.numb .plSel').index()

  $('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})

$(document).on('click', '[data-toggle]', function () {
  var targetId = $(this).data('toggle')
  targetId = $(targetId)
  var index = targetId.index()

  targetId.show().siblings().hide()
  $('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})

.numb {
  margin-top: 20px;
}
.numb > li:not(.plSel) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fullscreen">
  <div class="fullscreen-bg one">
    One
  </div>
  <div class="fullscreen-bg two">
    Two
  </div>
  <div class="fullscreen-bg one">
    Three
  </div>
</div>

<ul class="numb">
 <li id="numb01" class="plSel">Numb 1</li>
 <li id="numb02">Numb 2</li>
 <li id="numb03">Numb 3</li>
</ul>

<button type="button" data-toggle="#numb01">Toggle One</button>
<button type="button" data-toggle="#numb02">Toggle Two</button>
<button type="button" data-toggle="#numb03">Toggle Three</button>