2014-02-13 60 views
0

我正在使用jQuery將一個類「選定」添加到一個div當用戶點擊它(它將一個紅色邊框添加到縮略圖)。同時我想從先前選擇的div中移除該類。如何使用jQuery從所有div中移除一個類,而不僅僅是兄弟?

我可以得到這個工作,如果所有div是兄弟姐妹,但文檔中的其他div保持選中狀態。我正在設計和開發的頁面要求divs不能都是兄弟姐妹。如何在文檔中的任何位置的先前選定的div上移除「selected」類,而不僅僅是兄弟姐妹?

您可以查看和編輯上的jsfiddle我的例子:http://jsfiddle.net/3s4dM/6/

的jQuery:

$(".thumbnail").click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
}) 

CSS:

.thumbnail { 
    background: #dddddd; 
    width: 42px; 
    height: 42px; 
    margin-bottom: 5px; 
} 

.thumbnail:hover { 
    cursor: pointer; 
} 

.thumbnail.selected { 
    width: 36px; 
    height: 36px; 
    border: 3px solid #C72D30; 
} 

HTML:

<section> 

    <div class="thumbnail"></div> 

</section> 

<section> 

    <div class="thumbnail"></div> 

</section> 

<section> 

    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 

</section> 
+0

感謝您的所有建議。你可以在這裏看到正在進行的工作:http://www.tenbluedevils.com/esalon/tinted-love/product-detail-tinted-love.html – dylanstewart

回答

3

您可以使用組合的選擇讓所有div元素與類thumbnailselected然後從中取出selected類。(因爲你又增加selected到當前縮略圖忽略也使用not()

$(".thumbnail").click(function() { 
    $('.thumbnail.selected').not(this).removeClass("selected") 
    $(this).addClass("selected"); 
}) 

演示:Fiddle

+0

謝謝!這很好。非常感激。其他建議也可以,但我更喜歡使用'.not()'和組合選擇器。 – dylanstewart

1

您可以從具有.selected目前所有的元素刪除selected類,並添加selected類點擊.thumnail元素:

$(".thumbnail").click(function() { 
    $('.selected').removeClass("selected"); 
    $(this).addClass("selected"); 
}); 

Updated Fiddle

0

如果所有div的,你可以不喜歡它這個。

$(".thumbnail").click(function() { 
    $('div').removeClass('selected'); 
    $(this).addClass("selected"); 
}); 
+1

這適用於這個例子,但可能不是一個好的做法一般 - 特別是因爲「選擇」是這樣一個可重用的類。 –

+1

噢,是的,我想通過技術性,這個答案比其他人更好! –

1

試試這個?

$(".thumbnail").click(function() { 
    $('.selected').removeClass('selected'); 
    $(this).addClass("selected"); 
}); 
+0

作品! [的jsfiddle](http://jsfiddle.net/3s4dM/7/) –

相關問題