JQuery從父元素中選擇基於多個類的子元素

Question

我剛剛開始使用JQuery，我需要更改兩個元素的css類並刪除它們的onclick事件處理程序。

當單擊upDown類中的三個元素中的任何一個時，會彈出一個彈出窗口。當點擊該彈出框中的按鈕時，將調用vote_click（）。

我需要禁用類「向上」和「向下」，但沒有其他人的元素。

<div class="upDown"> 
    <div class="up" id="ctl04_btnUp" onclick="lastClick=this;" ></div> 
    <div class="com" id="ctl04_btnCom" onclick="lastClick=this;"></div> 
    <div class="down" id="ctl04_btnDown" onclick="lastClick=this;"></div> 
</div> 

這是我嘗試

var lastClick; //will be set to either the "up" or "down" 

    function vote_click() { 
     if (lastClick && lastClick.className != "com") { 
      $("#"+lastClick.parentElement.id + " > .up .down").each(
       function(index, e) { 
        alert('disabled ' + this.id); 
        this.onclick = null; 
        this.className += '-ya'; 
       } 
      ); 

      lastClick = null; 
     } 
    } 

我明明不知道我這樣做對我的做法任何一般性意見，將不勝感激。

Answer 1

我希望下面的代碼做你想要什麼：

(function($) { 
    var lastClick = null; 

    $('div.upDown .up, div.upDown.com, div.upDown.down').bind('click', function(e) { 
     lastClick = this; 
    }); 

    function vote_click() { 
     if (lastClick && (lastClick.hasClass('up') || lastClick.hasClass('down')) { 
      $('div.upDown .up, div.upDown.down').each(function() { 
       var $this = $(this); 
       $this.unbind('click'); 
       var c = $this.attr('class'); 
       $this.removeClass(c).addClass(c + '-ya'); 
      }); 
     } 
    } 

})(jQuery); 

注：

• 代碼獲取HTML標記去掉onclick屬性，讓你的JS是純粹的不顯眼。
• 因爲所有東西都被包裝在一個立即執行的匿名函數中，它沒有引入全局變量，這對互操作性很有好處。以前，lastClick變量是全局變量。
• 在您的代碼中，$("#"+lastClick.parentElement.id + " > .up .down")將選擇所有具有down類別的元素，它們是類別爲up的元素的後代，該元素是ID爲lastClick.parentElement.id的元素的子元素。這不是你想要的。你可以更容易地寫出你想要的內容，如$(lastClick).parent().find('.up, .down')。

編輯 爲什麼onclick通常是不可取的一句話：就個人而言，因爲在網頁上運行的所有的JS代碼，我不喜歡全局JavaScript中（可能從幾個開發商誰不溝通）份額一個全局命名空間。通過onclick等聲明的事件處理程序經常提及全局變量（就像你的情況一樣），所以這是我避免它們的一個原因。

第二個是onclick屬性中指定的代碼在特殊範圍（或範圍鏈中，確切地說）中運行。它不直接全局命名空間中運行，但在一個作用域鏈包括

• 觸發事件處理程序（這裏的div元素）
• 的document對象
• 也許什麼元素在之間（此未指定）
• 最後，當然，全局對象（window）

這可以導致意想不到的誤解，就像你打電話open()並意味着window.open()，但你得到的是document.open()。總之，我更喜歡確切知道我的事件處理程序能夠和不能看到什麼，並且我認爲在更大的項目中，嚴格分離代碼部分和避免全局變量是值得的。對於較小的代碼片段，只要你不寫onclick屬性的小說，使用onclick等是好的。

P.S .:是的，我使用Flanagan的「JavaScript - 權威指南」中的一個例子顯然是非常明顯的。