Question

我在我的vBulletin风格中使用Font awesome图标，我想在点击时将（减号）图标更改为（加号）！有办法吗？

    <a rel="nofollow" style="float:left" href="#" onclick="return
 toggle_collapse('forumbit_$forumid')">
 <span style="color:#24356C;" >
<i class="fa fa-minus-square-o fa-2x"></i>
</span>
</a>

Answer 1

我认为这个问题（和答案）可以帮助你做你想做的事情：）

Change an element's class with JavaScript

Answer 2

为图标分配ID，例如

<i class="fa fa-minus-square-o fa-2x" id="i-1"></i>

id可以是动态值，例如“ i- $ forumid”，具体取决于您生成html的方式。

在您的toggle_collapse（'forumbit_ $ forumid'）函数中，添加

var e = document.getElementById('i-1');
if (e.classList.contains('fa-plus-square-o')) {
  e.classList.toggle('fa-plus-square-o');
} else {
  e.classList.add('fa-plus-square-o');
}

或

function toggle_collapse(forumID) {
  ...

  var iconID = 'i-' + formumID.replace('forumbit_','')
  var e = document.getElementById(iconID);
  if (e.classList.contains('fa-plus-square-o')) {
    e.classList.toggle('fa-plus-square-o');
  } else {
    e.classList.add('fa-plus-square-o');
  }

  ...
}

如何在点击时更改字体真棒图标？

2 个答案: