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

Question

我想知道如何更改具有数据属性的特定div的内容。

我正在使用点击事件和.html

我有很多div元素如下：

<div class"name-of-class" data-user-id="ID">Content that changes</div>

我已经有了ID变量来识别我需要更改的div

$('.name-of-class').click( function() {
  $('.name-of-class').html('new content');
}

所以，我想在click函数中使用data属性data-user-id来准确指定我需要更改的div。

我希望自己清楚，如果没有，我会更好地解释自己。

Answer 1

您可以使用Attribute Equals Selector [name="value"]。

$('.name-of-class').click( function() {
  $('[data-user-id="id"]').html('new content');
}

编辑，根据评论，传递变量

$('.name-of-class').click( function() {
  $('[data-user-id="'+ idVariable +'"]').html('new content');
}

Answer 2

您可以使用Attribute Equals Selector [name="value"]

$('.name-of-class').click( function() {
  $('.name-of-class[data-user-id="id"]').html('new content');
}

修改

根据评论

$('.name-of-class').click( function() {
  $('.name-of-class[data-user-id="' + useridvariable +'"]').html('new content');
}

Answer 3

使用此：

HTML：

<div class="name-of-class" data-user-id="ID">Content that changes</div>

jQuery的：

$('.name-of-class').click( function() {
   $(this).html('new content');
});