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

桑德·舍弗(Sander Schaeffer)

我有一个小问题。我有几个按钮,每个按钮都有不同的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代码,或者可以建议我使用其他代码。

ReeCube

对于较短的方法,请尝试以下操作:

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;
}

但是,为什么要使用此功能呢?它要复杂得多!好吧,是的,但是这是为什么:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

具有数据属性的HTML Option元素。是否可行,如果可以,如何使用jQuery检索值?

来自分类Dev

jQuery:如何遍历具有数据属性的元素

来自分类Dev

如何更改具有数据属性的特定div的内容?

来自分类Dev

如何查找具有数据属性的标签

来自分类Dev

如何查找具有数据属性的标签

来自分类Dev

使用链接创建具有数据属性的元素

来自分类Dev

具有数据属性的jQuery ScrollTO

来自分类常见问题

具有数据属性的SelectListItem

来自分类Dev

如何使用jquery查找并选择所有具有数据属性以特定单词开头的元素?

来自分类Dev

如何获取具有相同类名的所有数据属性

来自分类Dev

如何添加具有数据库中已有属性的新对象?

来自分类Dev

如何删除具有数据属性作为触发器的类同级元素

来自分类Dev

使用具有数据属性作为标题的 div 应用手风琴

来自分类Dev

HTML上的具有数据的视频属性

来自分类Dev

循环遍历具有数据属性的表行

来自分类Dev

具有数据属性的JQuery UI工具提示

来自分类Dev

动态加载具有数据属性的JavaScript小部件

来自分类Dev

切换具有数据属性的类

来自分类Dev

具有数据属性的按日期排序

来自分类Dev

jQuery查找具有数据属性的div

来自分类Dev

具有数组属性的核心数据

来自分类Dev

切换具有数据属性的类

来自分类Dev

创建具有数据属性限制的个人

来自分类Dev

具有数据属性的动态选择不起作用

来自分类Dev

具有数据属性的多个下拉切换

来自分类Dev

具有数据属性的打开模式无法正常工作

来自分类Dev

定位具有数据属性的元素并动态设置值

来自分类Dev

如果单元格仅具有数字值,如何将数据获取到其他工作表

Related 相关文章

  1. 1

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

  2. 2

    具有数据属性的HTML Option元素。是否可行,如果可以,如何使用jQuery检索值?

  3. 3

    jQuery:如何遍历具有数据属性的元素

  4. 4

    如何更改具有数据属性的特定div的内容?

  5. 5

    如何查找具有数据属性的标签

  6. 6

    如何查找具有数据属性的标签

  7. 7

    使用链接创建具有数据属性的元素

  8. 8

    具有数据属性的jQuery ScrollTO

  9. 9

    具有数据属性的SelectListItem

  10. 10

    如何使用jquery查找并选择所有具有数据属性以特定单词开头的元素?

  11. 11

    如何获取具有相同类名的所有数据属性

  12. 12

    如何添加具有数据库中已有属性的新对象?

  13. 13

    如何删除具有数据属性作为触发器的类同级元素

  14. 14

    使用具有数据属性作为标题的 div 应用手风琴

  15. 15

    HTML上的具有数据的视频属性

  16. 16

    循环遍历具有数据属性的表行

  17. 17

    具有数据属性的JQuery UI工具提示

  18. 18

    动态加载具有数据属性的JavaScript小部件

  19. 19

    切换具有数据属性的类

  20. 20

    具有数据属性的按日期排序

  21. 21

    jQuery查找具有数据属性的div

  22. 22

    具有数组属性的核心数据

  23. 23

    切换具有数据属性的类

  24. 24

    创建具有数据属性限制的个人

  25. 25

    具有数据属性的动态选择不起作用

  26. 26

    具有数据属性的多个下拉切换

  27. 27

    具有数据属性的打开模式无法正常工作

  28. 28

    定位具有数据属性的元素并动态设置值

  29. 29

    如果单元格仅具有数字值,如何将数据获取到其他工作表

热门标签

归档