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

尝试使用attr()

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

同时检查这个优秀的answer

<强>说明

检查以下示例。

如果您点击span#one该属性会更改为attr()功能，如果您点击span#two，我们会尝试使用data()功能更改属性。

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

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

＆＃13;

$(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'});
});

＆＃13;

<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>

＆＃13;

Answer 2

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

Stream

Answer 3

你还应该更新里面的.ui-icon类。

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);

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

3 个答案: