javascript - 如何使用jquery更新data属性的值

Question

我有以下 Bootstrap 数据切换标记，我想更改图标和文本以在切换时更改。我可以更改文本，但不能更改图标。我做错了什么？

 <div id="collapseDiv" >
    <dl>
      <dt>...</dt>
      <dd>...</dd>
    </dl> 
 </div>

 <a href="#collapseDiv" data-toggle="collapse" class="icon-before" data-icon="&#xf196">Show More</a>

Jquery代码如下

 $('#collapseDiv').on('shown.bs.collapse', function () {
   $('.icon-before').data('icon', '&#xf147').text('Show Less');
 });

$('#collapseDiv').on('hidden.bs.collapse', function () {
    $('.icon-before').data('icon', '&#xf196').text('Show More');
});

Answer 1

尝试使用attr()

attr('data-icon', '&#xf147')

另请查看这个优秀的 answer

说明

检查以下示例。

如果您点击span#one，属性会通过attr()函数进行更改，如果您点击span#two，我们将尝试使用 data() 函数更改属性。

当您尝试使用 [data-test="false"] 选择元素时，只有第一个元素更改了其数据属性。

只有 data-test="false" 的元素才会变成红色:

$(document).on('click', 'span', function() {
  var that = $(this);
  var id = that.attr('id');
  if (id == 'one') {
    //Try with attr()
    that.attr('data-test', 'false');
  } else if (id == 'two') {
    //Try with data()
    that.data('test', 'false');
  }
  $('[data-test="false"]').css({'color':'red'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="one" data-test="true">one</span>
<span id="two" data-test="true">two</span>