jQuery 无法获取数据属性，返回未定义

Question

使用 jQuery，我试图获取以下数据属性...

<a href="#" data-id="54" class="active">54</a>

var myid = jQuery("active").data("id");

但是这给了我一个未定义的错误，我哪里出错了？

Answer 1

active将选择<active>元素，如果要获取具有此类名称的元素，请使用.active 。

下面是一个例子：

jQuery(".active")

Answer 2

丢失的 ”。” 在类选择器之前。 你需要做这样的事情来获取 id 属性：

$(".active").attr("id");

参考： https : //api.jquery.com/attr/

Answer 3

要查找任何标签的属性值，您可以在标签上使用attr()方法。 在attr()方法中，您必须传递自定义数据标记，如data-{attribute-teag-name}

有四种不同的方法可以得到结果：

 $(document).ready(function(){ var id = $("#custom").attr("data-customid"); console.log("attribute value with id -- ",id); var id_1 = $(".active").attr("data-customid"); console.log("attribute value with class -- ",id_1); var id_2 = $(".active").data("customid"); console.log("attribute value with class and data method -- ",id_2); var id_3 = $("#custom").data("customid"); console.log("attribute value with id and data method -- ",id_3); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" data-customid="54" id="custom" class="active">54</a>

Answer 4

您忘记使用class selector (.) 。此外，当您希望具有相同类的多个元素时，类选择器不适合（它将始终返回第一个元素）。

 var myid = jQuery(".active").data("id"); console.log(myid) // if you have multiple elements with same class jQuery(".active").each(function() { let myid = $(this).data("id"); console.log(myid) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <a href="#" data-id="54" class="active">54</a> <a href="#" data-id="55" class="active">55</a>

Answer 5

 var myid = jQuery(".active").data("id"); console.log(myid)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" data-id="54" class="active">54</a>

你少了一个“。” 在选择器中 - 告诉 jQuery 您正在选择一个类。

Answer 6

如果您正在访问类，则添加“.”（​​点）。 你的代码是 .

<a href="#" data-id="54" class="active">54</a>

var myid = jQuery(".active").data("id");

Answer 7

有 ”。” 在类选择器之前缺少，您可以通过以下方式获取 data-id 属性值：

$(".active").attr("data-id"); 或$(".active").data("id");

按类获取数据属性值，因此您必须使用“。” 并在标签名之前通过 id "#"

参考：

https://api.jquery.com/attr/

https://www.tutorialspoint.com/jquery/jquery-selectors

Answer 8

您通过Jquery("active")调用<active>元素

尝试

var myid = Jquery(".active").data("id");