Question

当用户单击jQuery的链接时，我想更改图标。我已经阅读了此页面上的一些帖子，但无法获取。

这是我的PHP模板。

<!-- Information message -->
<?php if (!empty($message) || !empty($message_alert)): ?>
    <b><a class="expedition-info-link" href="#expedition-info" data-toggle="collapse">
      <?php print t('More info'); ?>
      <i class="fas fa-angle-right"></i>
    </a></b>
    <div id="expedition-info" class="collapse alert alert-info info">
      <?php if (!empty($message)): ?>
        <p><?php print nl2br($message); ?></p>
      <?php endif; ?>
      <?php if (!empty($alert_message)): ?>
        <p><?php print nl2br($alert_message); ?></p>
      <?php endif; ?>
    </div>
<?php endif; ?>

这是JS文件。

$('.expedition-info-link').on('click', function() {
    $(this).find('i')
      .toggleClass('fa-angle-right')
      .toggleClass('fa-angle-down');
});

我只想将图标“ fa-angle-right ”更改为“ fa-angle-down ”。我究竟做错了什么？谢谢大家的帮助！

Answer 1

使用jQuery方法.toggleClass()，只需一行即可实现。

$('.expedition-info-link').on('click', function() {
  $('i', this).toggleClass('fa-angle-right fa-angle-down');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<b>
    <a class="expedition-info-link" href="#expedition-info" data-toggle="collapse">More info <i class="fa fa-angle-right"></i></a>
</b>

Answer 2

您可以使用.hasClass()检查图标的类别并进行更改。

$('.expedition-info-link').on('click', function() {
    var icon =  $(this).find('i');
    if(icon.hasClass('fa-angle-right')){
         icon.removeClass('fa-angle-right');
         icon.addClass('fa-angle-down');
    }else{
         icon.addClass('fa-angle-right');
         icon.removeClass('fa-angle-down');
    }
  });

Answer 3

在Bootstrap 3中，您也应该也可以使用.collapsed类。在这种情况下，无需额外的JavaScript逻辑即可更改图标。

.expedition-info-link:before {
    content: '\f105'; // angle right
    font-family: FontAwesome;
}
.expedition-info-link.collapsed:before {
    content: '\f107'; // angle down
}

另外添加aria-expanded="false"以初始化状态，无论它们是否开始折叠。在使用Bootstrap 3和Bootstrap 4时很有用，您现在可以将[aria-expanded="false"]用作选择器。

<a class="expedition-info-link" href="#expedition-info" data-toggle="collapse" aria-expanded="false">

.expedition-info-link[aria-expanded="false"]:before {
    content: '\f105'; // angle right
    font-family: FontAwesome;
}
.expedition-info-link[aria-expanded="true"]:before {
    content: '\f107'; // angle down
}

关于咏叹调的信息：https://getbootstrap.com/docs/4.0/components/collapse/#accessibility

单击更改链接图标

3 个答案: