刪除附加內容並在點擊添加其他內容

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>