如何使用jquery更新数据属性值

Question

我有下面的引导，数据切换标记，我想改变图标和文本，以更改切换。我可以让文字改变，但不能改变图标。我做错什么了？

 <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

您应该更新属性值，而不是更新data属性：

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

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

Answer 2

尝试使用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>

​

Answer 3

您还应该更新..ui图标的类。

var oldIcon = $('.icon-before').data('icon'),
    newIcon = '&#xf147';
    uiIcon = $('.icon-before').data('icon', newIcon).find('.ui-icon');
uiIcon.removeClass('ui-icon-' + oldIcon).addClass('ui-icon-' + newIcon);