簡化選擇性jQuery切換列表項目的代碼

我正在嘗試使用PHP和jQuery支持測驗。下面是我的HTML的例子：簡化選擇性jQuery切換列表項目的代碼

<ul class="Answers UL1"> 
    <li class="Answer A"></li> 
    <li class="Answer B"></li> 
</ul> 
<ul class="Answers UL2"> 
    <li class="Answer A"></li> 
    <li class="Answer B"></li> 
</ul> 

<script> 
$(document).ready(function(){ 
    $(".UL1 li.A").click(function(){ 
    $(".UL1 li.A").toggleClass("selected"); 
}); 
}); 
</script>

如果有人點擊第一個問題（ul.UL1）第一個列表項（li.A），「選擇」之類的會被追加到該項目。 ..

<li class="Answer A selected"></li>

但是，我想同時顯示所有十個問題和相關答案。這意味着我不得不寫40個JS腳本來覆蓋每個可能的組合...

<script> 
$(document).ready(function(){ 
    $(".UL1 li.A").click(function(){ 
    $(".UL1 li.A").toggleClass("selected"); 
}); 
}); 

// 38 similar scripts in between! 

$(document).ready(function(){ 
    $(".UL10 li.D").click(function(){ 
    $(".UL10 li.D").toggleClass("selected"); 
}); 
}); 
</script>

我只是想知道是否有某種方式來壓縮或簡化我的代碼，使用PHP和jQuery或CSS。

來源

2015-01-07 David Blomstrom

這是我會怎麼做

HTML

<ul class="Answers"> 
    <li class="1-A" id="1">1 A</li> 
    <li class="1-B" id="1">1 B</li> 
</ul> 
<ul class="Answers"> 
    <li class="2-A" id="2">2 A</li> 
    <li class="2-B" id="2">2 B</li> 
</ul>

$(".Answers li").click(function() { 
    $("." + this.id + "-A").removeClass("selected"); 
    $("." + this.id + "-B").removeClass("selected"); 
    $(this).addClass("selected"); 
});

的jsfiddle http://jsfiddle.net/w7x1hgq3/4/

更新

來源

2015-01-07 00:54:53 plexcell

Aweso我！他們都工作。我還有一個問題。我可以開始一個新的線程，但我不想因爲不在這裏問這個問題而受到傷害。使用修訂後的代碼，如果用戶選擇問題＃1，答案A，則該列表項現在突出顯示。但是，如果用戶選擇他們的想法並選擇問題＃1，答案B，則列表項目A和B都被突出顯示。我想解決這個問題，這樣只有用戶的最後選擇纔會突出顯示。有誰知道這是怎麼做到的嗎？讓我知道，如果我應該問這裏或問一個新的問題。謝謝！ –

哇，那很完美！ –

請試試這個課堂作業，而不是：

<ul class="Answers UL"> 
    <li class="Answer A"></li> 
    <li class="Answer B"></li> 
</ul> 
<ul class="Answers UL"> 
    <li class="Answer A"></li> 
    <li class="Answer B"></li> 
</ul>

然後將下面的腳本（只有一個）應該足以覆蓋情況：

<script> 
$(document).ready(function(){ 
    $(".UL li").click(function(){ 
    $(this).toggleClass("selected"); 
}); 
}); 
</script>

下面是一個簡單JS Fiddle展示這工作（我希望你需要的方式）。

我希望這有助於任何方式。

來源

2015-01-07 00:50:38

簡化選擇性jQuery切換列表項目的代碼

回答

相關問題