Question

我有点问题。我有几个按钮，每个按钮都有不同的data-function=""属性。我想执行一个小脚本来检查哪些按钮被点击了。

<a href="#" class="functionButton" data-function="blogFunctionaliteit">Blog</a>
<a href="#" class="functionButton" data-function="offerteFunctionaliteit">Offerte</a>
<a href="#" class="functionButton" data-function="overzichtFunctionaliteit">Offerte</a>

我只想要一个说

的脚本

if $(this) has <data-function="blogFunctionaliteit"> { }
if $(this) has <data-function="offerteFunctionaliteit"> { }
if $(this) has <data-function="overzichtFunctionaliteit"> { }
else { // do nothing }

我尝试过很多东西，但似乎一切都没有用，包括

if ($(this).attr('data-function', 'blogFunctionaliteit') { } - 总是会导致yes，因为它只检查对象是否有第一个参数，而不是同时检查它们。

提前感谢您编写正确的jQuery代码或建议我使用其他内容。

Answer 1

简而言之，试试这个：

if ($(this).data("function") === 'blogFunctionaliteit') {
    // TODO: enter your code...
} else if ($(this).data("function") === 'offerteFunctionaliteit') {
    // TODO: enter your code...
} else if ($(this).data("function") === 'overzichtFunctionaliteit') {
    // TODO: enter your code...
} else {
    // do nothing
}

与此同时，我获得了很多JavaScript经验，并且我对自己的代码建议有一些改进。如果有人正在阅读这个答案，我强烈建议使用以下代码：

var self = this;
var $self = $(self);
var dataFunction = $self.attr('data-function');

switch (dataFunction) {
  case 'blogFunctionaliteit':
    // TODO: enter your code...
    break;
  case 'offerteFunctionaliteit':
    // TODO: enter your code...
    break;
  case 'overzichtFunctionaliteit':
    // TODO: enter your code...
    break;
  default:
    // do nothing
    break;
}

但为什么你应该用这个呢？它复杂得多！嗯，是的，但这就是原因：

您应始终将this存储在变量中，因为this可能不是您认为的那样，请查看此链接：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/this
您应该只调用一次jQuery函数（$(...)），然后将其存储在新变量中以提高性能。对象函数也是如此。
对于这种情况，最好使用switch-case结构，请查看此链接：Case vs If Else If: Which is more efficient?

相信我，如果您开始像第二个代码段一样编写代码，那么JavaScript的问题会更少。

Answer 2

你可以这样做：

if ($(this).attr('data-function') == 'blogFunctionaliteit') { }

Answer 3

jQuery具有原生数据支持：https://api.jquery.com/jQuery.data/

$('a').click(function() {
    if($(this).data("function") === "blogFunctionaliteit"){
        alert("You clicked me.");
    };
});

Answer 4

您的错误在于您正在使用函数属性以对属性应用某些更改。而不是那样，我想你想检查属性值是否是你想要的。所以这就是你应该做的：

if ($(this).attr('data-function') === 'blogFunctionaliteit') {
    //bla bla
}

如何使用＆＃39;如果$（this）具有数据属性＆＃39;

4 个答案: