jQuery 如何使用“如果 $(this) 具有数据属性”

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

提问by Sander Schaeffer

I'm with a little problem. I've got a few buttons, each with a different data-function=""attribute. I want to execute a little script to check which of the buttons has been clicked.

我有一个小问题。我有几个按钮，每个按钮都有不同的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>

I simply want a script that says

我只想要一个脚本，上面写着

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

I've tried lots of thing, but everything doesn't seem to be working, including

我尝试了很多东西，但似乎一切都不起作用，包括

if ($(this).attr('data-function', 'blogFunctionaliteit') { }- Which results in a yes, always, as it only checks if the object has the first parameter, instead of checking them both.

if ($(this).attr('data-function', 'blogFunctionaliteit') { }- 结果是肯定的，总是，因为它只检查对象是否具有第一个参数，而不是同时检查它们。

Thanks in advance for writing the correct jQuery code or could advice me to use something else.

提前感谢您编写正确的 jQuery 代码，或者可以建议我使用其他东西。

回答by ReeCube

For the short way, try this:

简而言之，试试这个：

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
}

Meanwhile I've earned a lot of experience with JavaScript and I have some improvements for my own code suggestion. If anyone is reading this answer I would highly recommend to use the following code:

同时，我在 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;
}

But why the hell you should use this? It's a lot more complicated! Well, yes it is, but here's why:

但是你为什么要使用这个？这要复杂得多！嗯，是的，但原因如下：

• You should always store thisin a variable, because thismay not be what you think it is, checkout this link: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/this
• You should call the jQuery functions ($(...)) only once and then store it in a new variable to improve performance. The same for object functions.
• For such cases it's better to use the switch-case construct, checkout this link: Case vs If Else If: Which is more efficient?

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

Trust me, you will have a less problems with JavaScript if you start writing your code like the second code snippet.

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

回答by Felix

You can do:

你可以做：

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

回答by Furkan Omay

jQuery has native data support: https://api.jquery.com/jQuery.data/

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

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

回答by 0__1

Your mistake is that you are using the function attribute in order to apply some changes to the attribute. Instead of that, i think you want to check if the attribute value is the one you want. So this is what you should do:

您的错误是您使用 function 属性是为了对属性应用一些更改。取而代之的是，我认为您想检查属性值是否是您想要的值。所以这是你应该做的：

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