当图标仅处于活动状态时如何更改它？答案

【问题标题】：How do I change a icon when it's only active?当图标仅处于活动状态时如何更改它？
【发布时间】：2019-10-18 15:48:46
【问题描述】：

在单击图标（在类中）时，所有相同的图标都会发生变化。

我尝试过使用 $(this)。这是在其他问题中提出的，但没有骰子。

<p>Elaine Thompson   <i class="material-icons add box">add_box

    </i></p>

    <span class='hideinfo'>
        <ul>

            <li><a href='mailto:example@example.co.uk'>example@example.co.uk</a></li><li>01224 732764</li><li>07739 745612</li>
                </ul>
                    </span>



<script>


$(document).ready(function() {

// Hide the "view" div.
$('span.hideinfo').hide();


$('i.add').on('click',function() {
  var icon = $('.box');
  icon.toggleClass('add');
  if (icon.hasClass('add') ) {
    icon.text('add_box');
    $('span.hideinfo').hide();

  } else {
    icon.text('indeterminate_check_box');
   $(this).next().slideToggle("slow");
    return false;

  }
});

});
</script>

它应该只在其激活时改变图标。然后它会更改 indeterminate_check_box 以显示此人的信息，然后再次单击它以更改回 add_box 并隐藏信息。有什么提示吗？

【问题讨论】：

就像您在其他问题中找到的一样，您应该使用var icon = $(this) 代替var icon = $('.box') jsfiddle.net/1gn3jh0c。前者将仅选择被单击的 元素，而后者将选择所有具有box 类的元素。另外，我不知道你在用"view" div 做什么，因为它没有包含HTML - 每个 标签后面是否有span.hideinfo 元素？也许更多的 HTML 和一些澄清会帮助您找到问题的根源？
感谢您的评论。这是否更好地澄清了一些事情？
是的，确实如此。检查此编辑jsfiddle.net/5p3mu1db

标签： jquery google-material-icons

【解决方案1】：

您确实想使用$(this) 来处理被点击的单个 元素，但是，使用$(this).next().slideToggle() 不会切换任何东西，因为 嵌入在（它会尝试在 元素中选择下一个兄弟元素，但没有），而不是你想先选择父元素（我使用.parent()，但你可以这样做@ 987654330@ 或其他东西），然后选择下一个元素并slideToggle 它。

<script>
  $('.hideinfo').hide();

  $('i.add').click(function() {
    $(this).toggleClass('add').text(
      $(this).hasClass('add') ? 'add_box' : 'indeterminate_check_box'
    ).parent().next().slideToggle();
  });
</script>

https://jsfiddle.net/5p3mu1db/

【讨论】：