jQuery的addClass到匹配的元素

Question

背景

我已經得到了包括四個絕對定位的div 「象限」 的佈局，像這樣1日 - 3日：

div.quadrant#one |  div.quadrant#two 
height: 25%;  |  height: 25%; 
width: 25%;   |  width: 25%; 
        | 
__________________________________________ 

div.quadrant#three | div.quadrant#four 
height: 25%;  | height: 25%; 
width: 25%;   | width: 25%; 
        | 

HTML

<div class="quadrant" id="one"></div> 
<div class="quadrant" id="two"></div> 
<div class="quadrant" id="three"></div> 
<div class="quadrant" id="four"></div> 

我正在使用jQuery添加.open或.closed的類當點擊一個象元時，quadrant.open增長到95％寬度和100％高度，而quadrant.closed縮小到5％寬度和33.33％高度。這裏的代碼：

$('div.quadrant').click(function() { 
    $(this).addClass('open'); 
    $(this).parent().children('div.quadrant').not('.open').addClass('closed'); 
}); 

我已經得到那件作品沒有問題。 此處，我很爲難：

的問題

我也想用.addClass另一個類添加到這取決於它們是否是第一個div.closed三個div.closed元素，第二，或第三個。如果一個div是第一個關閉的類，我還想添加.top;如果第二，我想補充.middle;如果第三，我想補充.bottom。

我試着用:eq(1)，:eq(2)和:eq(3)得到這個工作。 但是，只有在點擊了div#one或div#two之後，div.closed之後的象限纔會受到影響。下面是代碼：

$(this).parent().children('div.quadrant').not('.open').addClass('closed'); 
$(this).parent().children('div.quadrant:eq(1)').not('.open').addClass('top'); 
$(this).parent().children('div.quadrant:eq(2)').not('.open').addClass('middle'); 
$(this).parent().children('div.quadrant:eq(3)').not('.open').addClass('bottom'); 

這裏有一個JS斌：http://jsbin.com/UJopeTo/1/edit?html,css,js,output

是不是有什麼毛病我已經鏈接這些功能的方式是什麼？任何幫助表示讚賞！

Answer 1

您可以創建jQuery對象，然後對jQuery對象中的不同項目執行不同的操作。

像你需要清理以前的狀態（之前打開，關閉，上，中，下），它看起來也對我來說太像這樣：

$('.quadrant').click(function() { 
    var self = $(this); 

    // clear prior state 
    var all = self.parent().find(".quadrant").removeClass("open closed top middle bottom"); 

    // mark the clicked on one as open 
    self.addClass("open"); 

    // mark all other ones as closed 
    var closed = all.not(this).addClass("closed"); 

    // now mark each closed one separately 
    closed.eq(0).addClass("top"); 
    closed.eq(1).addClass("middle"); 
    closed.eq(2).addClass("bottom"); 
}); 

Answer 2

你正在運行到的問題是你沒有正確理解：eq（）選擇器和.not（）函數在做什麼。

$(this).parent().children('div.quadrant:eq(1)').not('.open').addClass('top'); 
$(this).parent().children('div.quadrant:eq(2)').not('.open').addClass('middle'); 
$(this).parent().children('div.quadrant:eq(3)').not('.open').addClass('bottom'); 

什麼，這是你在jsbin鏈接提供的代碼做的是

1. 如果它的類是選擇標籤內的第二div.quadrant元素（這是#two）
2. 不.open，添加.top類
3. 選擇第三個div。在標記內象限元件（這是#three）
4. 如果其類不。開，所述.middle類添加到它
5. 選擇標記中的第四div.quadrant元件（這是#four）
6. 如果它的類不是.open，那麼在其中添加.bottom類

我明白你想要做什麼，但那不是最好的方法。解決這個問題的最好方法就是用可重複的，更加面向對象的方法解決問題，就像jfriend00所建議的那樣。