使用 data() 访问元素？答案

【问题标题】：access an element with data()?使用 data() 访问元素？
【发布时间】：2011-12-29 12:33:35
【问题描述】：

我无法更改 id，我无法更改名称，并且我需要两个不同的类来设置元素的样式。

可以使用 data () 访问元素吗？基本上，我怎样才能访问data-arrow="el"？

  $(".vote").data("arrow");
  $(".vote").click(function () {//here i need a selector that should have a permanent name

  //some code
  });

<a href="" class="vote" id="<?php echo $id ?>" name="up" data-arrow="el">up</a>
<a href="" class="vote" id="<?php echo $id ?>" name="down" data-arrow="el">down</a>

谢谢

【问题讨论】：

标签： javascript jquery css-selectors

【解决方案1】：

$("a.vote[data-arrow='el']").click(function(){
    alert("clicked");
});

Example.

这是 jQuery 的attribute equals selector。

但是选择所有a 元素与vote 类不是更好吗？像这样：

$("a.vote").click(function(){...});

另外，建议使用on() 进行事件处理：

$(document).on("click", "a.vote[data-arrow='el']", function(e){
    e.preventDefault();
    alert("clicked");
});

Example.

【讨论】：

【解决方案2】：

如果您尝试从点击处理程序中访问被点击元素的数据，您可以这样做：

$(".vote").click(function () {
    var arrow = $(this).data("arrow");
    // do whatever you want with the value of the arrow variable
});

如果您尝试使用 data-arrow 值创建选择器，则可以（如 Purmou 的帖子中所述），但只需添加另一个类并在选择器中使用它会更简洁：

<a href="" class="vote el" id="<?php echo $id ?>" name="up">up</a>

和 jQuery 选择器只选择这些元素：

$(".vote.el")

【讨论】：

看起来情况并非如此——两个链接对于data-arrow 具有相同的值。他只是想要一种通过使用 data 属性选择元素来将点击附加到元素的方法。
当我 addClass(someclass) 我将删除 .vote，所以点击处理程序将停止工作。
@user947462 - .addClass("someClass") 添加一个新类 - 它不会删除现有类。但是，如果您愿意，可以从选择器中删除.vote，如果您不想在选择器中使用.vote，可以使用$(.el) 作为选择器。选择器中的类更干净，浏览器通常比数据属性更优化以按类选择。