如何更改仅处于活动状态的图标？

Question

点击图标（在 class 内）时，所有相同的图标都会发生变化。

我试过使用$(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 并隐藏信息。有什么提示吗？

Answer 1

您确实希望使用 $(this) 来处理被单击的单个  元素，但是，使用 $(this).next().slideToggle() 不会切换任何内容，因为 嵌入在  中（它会尝试 selecting  元素中的下一个兄弟元素，但没有），相反你想 select 父元素  首先（我使用 .parent()，但你可以使用 .closest('p') 或其他方式），然后 select 下一个元素和 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/

如何更改仅处于活动状态的图标？

How do I change a icon when it's only active?

jquery

google-material-icons