Question

我有一个李的列表，点击的将有一类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为父母一样。

如果视频和列表的位置都按正确顺序排列，我在这里使用jQuery index找到它的位置，然后show它并收集它的siblings元素然后{{1}他们。然后找到通过找到索引显示的视频，隐藏其兄弟姐妹，就是这样。

我还在这里展示了如果能够以更好的命名约定存储相关选择器，你将更容易获得它。示例此处使用按钮上的hide属性来关联目标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;
}

Answer 2

我已经调整了您的HTML，但我认为这就是您想要的。 FIDDLE

＆＃13;

$(document).on("click", ".menu ul li a", function() {
  $(".container > div").eq($(this).parent().attr("id")-1).addClass("plSel");
  $(".container > div").not(".plSel").css("display", "none");
})

＆＃13;

.menu {
  float: left;
  margin-bottom: 25px;
}

.container {
  float: left;
  clear: left;
}

.fullscreen-bg {
  float: left;
}

li {
  list-style: none;
  float: left;
  min-width: 50px;
  text-align: center;
}

li a {
  text-decoration: none;
  color: darkblue;
}

li a:hover {
  color: red;
}

.fullscreen-bg:not(:last-child) {
  margin-right: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li id="1"><a href="#">One</a></li>
    <li id="2"><a href="#">Two</a></li>
    <li id="3"><a href="#">Three</a></li>
    <li id="4"><a href="#">Four</a></li>
    <li id="5"><a href="#">Five</a></li>
    <li id="6"><a href="#">Six</a></li>
  </ul>
</div>
<div class="container">
  <div class="fullscreen-bg one">
    <img src="http://placehold.it/100x150" />
  </div>
  <div class="fullscreen-bg two">
    <img src="http://placehold.it/100x150" />
  </div>
  <div class="fullscreen-bg three">
    <img src="http://placehold.it/100x150" />
  </div>
  <div class="fullscreen-bg four">
    <img src="http://placehold.it/100x150" />
  </div>
  <div class="fullscreen-bg five">
    <img src="http://placehold.it/100x150" />
  </div>
  <div class="fullscreen-bg six">
    <img src="http://placehold.it/100x150" />
  </div>
</div>

＆＃13;

删除附加内容并在点击时添加其他内容

2 个答案: