舉動「已禁用」類使用Javascript

Question

我有這個名單羣（引導），我想移動這些鏈接之間的「禁用」類，

<div class="list-group"> 
    <a href="#" onclick="form1()" class="list-group-item disabled"> 
    Particular 
    </a> 
    <a href="#" onclick="form2()" class="list-group-item">Distribuidores</a> 
    <a href="#" onclick="form3()" class="list-group-item">Incidencias</a> 
    <a href="#" onclick="form4()" class="list-group-item">Grandes cantidades</a> 
</div> 

也就是說，如果我點擊第二個鏈接時， 「禁用」應該從第一個鏈接到第二移動，所以我們會碰到這樣的：

<div class="list-group"> 
    <a href="#" onclick="form1()" class="list-group-item">Particular</a> 
    <a href="#" onclick="form2()" class="list-group-item disabled">Distribuidores</a> 
    <a href="#" onclick="form3()" class="list-group-item">Incidencias</a> 
    <a href="#" onclick="form4()" class="list-group-item">Grandes cantidades</a> 
</div> 

Answer 1

你可以使用這樣的方法：

function setDisabled(index) { 
    var links = document.querySelectorAll(".list-group-item") 
    for (var i = 0, link; (link = links[i]) != undefined; i++) { 
    link.className = "list-group-item" + (i == index ? " disabled" : ""); 
    } 
} 

可以使用您正在使用的方法來調用此方法，以便使用index參數作爲元素的從零開始的索引來處理點擊。您也可以爲每個鏈接添加一個id，然後使用它來查找被點擊的鏈接。

基本上，它會用「list-group-item」類創建一個所有元素的數組，並將它們的class屬性重置爲只有該類。對於被點擊的鏈接，它還添加了「禁用」類。