在div中選擇一個類jquery

我有一個div裏面有一些span元素，當我點擊一個它打開，所有其他的關閉。它第一次工作，即打開，但我不能關閉，它也選擇所有具有相同ID的跨度。我對Jquery非常陌生並且掙扎着！任何指針讚賞在div中選擇一個類jquery

感謝Techboy

<div id="btn-grp"> 
     <span class="button ButtonOn">button1</span> 
     <span class="button ButtonOff">button2</span> 
     <span class="button ButtonOff">button3</span> 
     <span class="button ButtonOff">button4</span> 
     <span class="button ButtonOff">button5</span> 
</div> 


<script type="text/javascript"> 

    $("#btn-grp").click(function(){ 
     $(this).addClass('ButtonOn').siblings().removeClass('ButtonOff'); 
    }); 

</script>

來源

2013-06-01 user2247671

我有一個div裏面有一些span元素，當我點擊一個它打開，所有其他關閉。

聽起來像您想要將ButtonOn類添加到單擊的元素並將其從先前擁有該元素的元素中移除。同樣，你想從被點擊的元素中移除ButtonOff類，並將它添加到先前的「selected」元素。

您目前的代碼根本就沒有這樣做。它將ButtonOn類添加到單擊的元素，並從其兄弟中刪除ButtonOff類。你永遠不會從任何元素中移除ButtonOn類。此外，您還將事件處理函數綁定到元素的父項。所以你實際上是將這些類應用到父類，並且這些樣式可能會級聯下來，以便獲得意想不到的行爲。

所以，你必須添加和刪除類和綁定的事件處理程序，以正確的元素：

$("#btn-grp span.button").click(function(){ 
    $(this).siblings('.ButtonOn').add(this).toggleClass('ButtonOn ButtonOff'); 
});

DEMO

取決於你想怎麼的治療點擊已經「在「跨度上，您可能需要分別處理前一個元素和當前元素：

$(this).siblings().removeClass('ButtonOn').addClass('ButtonOff'); 
$(this).addClass('ButtonOn').removeClass('ButtonOff');

DEMO

FWIW，我不會用兩個類來表示一個按鈕的狀態。我只是使用一個類將按鈕標記爲「打開」，並且默認情況下將所有其他類型的樣式設置爲「關閉」。

來源

2013-06-01 13:11:07

+1這是比我的好的解決方案 – PSR

是的，但如果我有五個按鈕，只有一個可以在任何時候開啓。 – user2247671

@ user2247671：那麼？你想說什麼？爲什麼我的解決方案在這種情況下不起作用？ –

，因爲它增加了一個點擊處理程序按鈕組您所使用的選擇是不是這個目的是非常有用的，而不是按鈕本身，使用 $(".button").click(...代替。

然後所有的按鈕都有一個點擊處理程序，您點擊的按鈕獲取ButtonOn類，而所有的兄弟會獲得ButtonOff。

來源

2013-06-01 13:09:50 luk2302

+1你是對的 – PSR

讓你的所有默認彩色按鈕OFF（指不使用.ButtonOff在所有）：

LIVE DEMO

<div id="btn-grp"> 
    <span class="button ButtonOn">button1</span> 
    <span class="button">button2</span> 
    <span class="button">button3</span> 
    <span class="button">button4</span> 
    <span class="button">button5</span> 
</div>

CSS：

.button{ 
    cursor:pointer; 
    border-radius:5px; 
    padding:4px 14px; 
    margin:4px; 
    display:inline-block; 
    background:#ddd; 
} 

.ButtonOn{ 
    background:#cf5; 
}

比只是做：

$("#btn-grp .button").click(function(){ 
    $(this).addClass('ButtonOn').siblings().removeClass('ButtonOn'); 
});

來源

2013-06-01 13:23:06

在div中選擇一個類jquery

回答

相關問題