如何選擇一個獨特的DIV，並使用jQuery取消選擇其餘部分？

嗨，我使用了jQuery UI的「選擇」和我有垂直排列的列表，並且在選擇每一個div的div的背景變爲粉紅色，當我選擇另一個DIV的一個先前選擇應更改爲白色背景多個div。截至目前，我已經達到了我所需要的，但問題在於每個功能。如果我有100個div，它循環100次並檢查下面的條件。我的問題是我如何避免這個循環，並作出獨特的選擇（即沒有兩個DIV應該有相同的顏色）。如何選擇一個獨特的DIV，並使用jQuery取消選擇其餘部分？

$(".selectDiv").click(function(){ 
    var clkLink = this.id; 
    $(".selectDiv").each(function(){ 
     var clkLink2 = this.id; 
     if(clkLink != clkLink2) 
      $(clkLink2).css("background","#FF00CC"); 
     else 
      $(clkLink2).css("background","#FFFFFF"); 
    }); 
});

來源

2009-08-17 kayteen

如果你有顏色的CSS類，這是很容易做到：

$('.selectDiv').click(function(){ 
    $('.isSelected').removeClass('isSelected'); 
    $(this).addClass('isSelected'); 
});

來源

2009-08-17 11:28:14

+1這是正確的做法 – cletus 2009-08-17 11:29:29

如果您添加類而不是更改css，則可以通過選擇器中的類名進行過濾。

來源

2009-08-17 11:27:15 redsquare

這將重置所有這些，然後改變當前點擊一個：

$(".selectDiv").click(function(){ 
    $(".selectDiv").css("background","#FFFFFF"); 
    $(this).css("background","#FF00CC"); 
});

來源

2009-08-17 11:28:29 karim79

var currentDiv = null; 

$('div.selectDiv').click(function() { 
    if (currentDiv !== null) { 
     currentDiv.css('background', '#ff00cc'); 
    } 
    currentDiv = $(this); 
    currentDiv.css('background', '#ffffff'); 
});

來源

2009-08-17 11:28:53 RaYell

您的jQuery UI可選擇點擊事件不應該使用您的div的click事件自動分配。可選功能有其自己的事件綁定，稱爲「停止」。

var previousSelection = {}; // Use this to store the previous selection if desired 

$('#selectDiv-Container').selectable({ 
        stop: function() { 
         previousSelection = $(this); 
         $('.ui-selected', this).each(function() { 
          // Iterate through my new selections if desired. 
         }); 
        } 
       });

我假設您的可選列表中有一個名爲「selectDiv-Container」的容器，用於說明目的。如果你想保留以前點擊過的項目在內存中（對其進行設計），你可以像上面那樣將它緩存在一個變量中（previousSelection）。

當您的用戶點擊您的清單，「停止」事件觸發。您可以迭代所有選定的值並在該點設置它們的樣式。

來源

2009-08-17 11:36:53

如何選擇一個獨特的DIV，並使用jQuery取消選擇其餘部分？

回答

相關問題