jquery - 事件触发器上的 jQuery“父”范围感到困惑

Question

当用户单击链接时，我正在尝试检查该链接的容器是否具有active分配给它的类。

但我认为我在范围界定方面遇到了问题，因为当浏览器应用视觉样式时，点击在触发时看不到该类分配。

我创建了一个复制问题的 jsfiddle 。非常感谢启蒙。

Answer 1

或者你可以使用on

$controls.on("click", "a", function(e) {
    e.preventDefault();
    var theParent = $(this).parent();
    //if you need 'i' here it is
    var i = $.inArray(theParent[0], $controls);
    console.log('L' + i + ': ' + theParent.hasClass('active'));
});

http://jsfiddle.net/F69nh/6/

Answer 2

一种解决方案可能是使用var关键字来缩小变量的范围：

$links.each(function () {
    var $link = $(this);
    ...
});

全局范围演示：

var a = 1;
function f(v) { a = v; };
console.log(a); // 1
f(2);
console.log(a); // 2

本地范围演示：

var a = 1;
function f(v) { var a = v; };
console.log(a); // 1
f(2);
console.log(a); // 1

查看这篇关于 javascript 作用域的精彩文章。

Answer 3

$link超出了处理程序中的 annoynmous 函数的范围。您需要$(this)在点击处理程序中使用：

$links.each( function(i) {
    $link = $(this);
    $link.click( function(e) {
        e.preventDefault();
        console.log('L' + i + ': ' + $(this).parent().hasClass('active'));
    });
});

请参阅更新的 jsFiddle。

---

如果您必须在不使用 的情况下解决此问题，也可以使用事件数据作为闭包$(this)，例如：

$links.each( function(i) {
    $link = $(this);
    $link.click({ link : $link }, function(e) {
        e.preventDefault();
        //console.log('L' + i + ': ' + $(this).parent().hasClass('active'));
        e.data.link.parent();
    });
});

Answer 4

像这样简化你的 JavaScript：

var $controls = $('#controls li');
var $links = $('a', $controls);
var $control, $link;

$controls.each( function(i) {
    $control = $(this);
    if (i == 0) {
        $control.addClass('active');
    }
    console.log('C' + i + ': ' + $control.hasClass('active'));
});

$links.click(function(e) {
    e.preventDefault();
    console.log('L' + $(this).index() + ': ' + $(this).parent().hasClass('active'));
});

Answer 5

Here's another approach for a possible menu: http://jsfiddle.net/earthdesigner/7uxcg/1/

The javascript portion:

$(document).ready(function(){
    $('nav a').click(function(){
        $('nav li').removeClass('active');
        $(this).parent().addClass('active');
    })  
});