How to use 'If $(this) has data-attribute'
我有点问题。我有几个按钮,每个按钮都有不同的
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 } |
我试过很多东西,但似乎一切都不管用,包括
提前感谢您编写正确的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 } |