代码之家 › 专栏 › 技术社区 › Laramie

JQuery基于父元素中的多个类选择子级

jquery

Laramie · 技术社区 · 16 年前

当单击类为upDown的div中的三个元素中的任何一个时,会出现一个弹出窗口。单击该弹出窗口中的按钮时,将调用vote\u 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;
        }
    }

我显然不知道我在做什么,所以任何关于我的方法的一般性意见都会被感激的。

1 回复 | 直到 16 年前

Tom Bartel 16 年前

我希望以下代码符合您的要求:

(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);

onclick 属性,这样你的JS就完全不引人注目了。
因为所有内容都包装在一个立即执行的匿名函数中,所以它不引入全局变量,这有利于互操作性。以前 lastClick 变量是全局变量。
在你的代码里, $("#"+lastClick.parentElement.id + " > .up .down") 将用类选择所有元素 down up 它是id为的元素的子元素 lastClick.parentElement.id . 那不是你想要的。你可以把你想要的写得更容易 $(lastClick).parent().find('.up, .down') .

编辑说说为什么 单击 通常是不受欢迎的:就个人而言,我不喜欢JavaScript中的globals,因为页面中运行的所有JS代码(可能来自几个不通信的开发人员)共享一个全局名称空间。通过声明的事件处理程序 单击 etc.经常提到globals(就像你的例子一样),所以这是我避免使用它们的一个原因。

第二个是 单击 不

触发事件处理程序的元素(这里是div元素)
这个 document
可能介于两者之间(未指定)
window )

这会导致意外的误解,就像你所说的那样 open() 而且很中庸 window.open() 但你得到的是 document.open() . 简言之,我更喜欢确切地知道我的事件处理程序能看到什么和看不到什么,我认为在更大的项目中,严格分离代码部分和避免全局变量是有好处的。对于较小的代码片段,只要你不在 单击 单击 等就好了。

附言:是的,很明显我用的是弗拉纳根的“JavaScript-权威指南”中的一个例子。