javascript - 检查当前单击的元素是否等于 JQuery 中的特定 div 'id'

Question

我已经在网络上研究并测试了很长一段时间的解决方案，但一直无法实现。所以我决定在这里创建一个帖子，即使它可能技术含量低而且我会因为它而被否决我已经付出了很多努力，我希望有人能提供帮助。

目前我的代码使用 JQuery 中的 .click() 函数，我的目标是在按钮上使用它，这样当我单击该按钮时，它会检查 id 单击的按钮匹配我在 .js 文件中设置的变量。换句话说，检查我点击的 id 是否等于我的“目标”。

这是有问题的部分代码:

var target = '#vig_but_inc';

$(this).click(function() {

    if(this.id == target) {
        vigor.incStat(); // increase stats once
        console.log("hi"); // test if code fires
        $('#vig_res').html(vigor.current);
    }
});

请注意，我已经检查了代码是否在不匹配 id 且没有 if 语句的情况下工作 - 在这种情况下，如果我单击特定的预设按钮的 id 我设法增加了 #vig_res 的值，这是我的目标。

然而，如前所述，涉及到 if，我正在尝试将点击的内容与我的 target 相匹配，即我希望它匹配的 id 名称。我正在使用 this 来检查我的点击，它在其他领域有效，但在这种情况下似乎无效。

我已将变量目标设置为全局范围，如评论中所述:Check if the clicked div id matches with variable .它仍然不起作用。

我知道并测试过 $(this).click(..，它会触发我点击的任何 div 中的代码。所以我相信问题出在之后，可能在 this.id 中，但我也像其他地方建议的那样使用了 .is()，但它也不会那样工作。

我希望有人能告诉我如何解决这个问题，谢谢。

Answer 1

答案有点复杂，在触发点击时调用的匿名函数中，this不是被点击的元素，它是一个jQuery对象。您应该接受 event 作为第一个参数并使用 event.target。另外，target 不应包含 #，因为 .id 仅返回名称。

因此，您的代码应如下所示:

var target = 'vig_but_inc';

$(this).click(function(event) {
    console.log(event.target);
    if(event.target.id == target) {
        vigor.incStat(); // increase stats once
        console.log("hi"); // test if code fires
        $('#vig_res').html(vigor.current);
    }
});

工作 fiddle :https://jsfiddle.net/e8np0g9j/3/