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

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，问题在于何时g ETS将超过一个，它只是不会工作

$(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元素，则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; 
 
}

<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>

Answer 2

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

$(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"); 
 
})

.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; 
 
}

<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>