关于jquery:如何使用’如果$(this)有data-attribute’

How to use 'If $(this) has data-attribute'

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

1
2
3
Blog
Offerte
Offerte

我只想要一个写着

1
2
3
4
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代码,或者建议我使用其他代码。


在短期内,尝试以下方法:

1
2
3
4
5
6
7
8
9
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方面积累了很多经验,并且对自己的代码建议进行了一些改进。如果有人阅读此答案,我强烈建议使用以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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与if else if:哪个更有效?

相信我,如果您开始像编写第二个代码片段那样编写代码,那么您对JavaScript的问题就更少了。


你可以做到:

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


jquery具有本机数据支持:https://api.jquery.com/jquery.data/

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


您的错误是,您正在使用函数属性以便对属性应用一些更改。相反,我认为您需要检查属性值是否是您想要的值。所以你应该这样做:

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