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 - 权威指南”中的一个例子显然是非常明显的。