Jquery 当图标'；它只是活动的？

单击图标（类内）时，所有相同的图标都会更改

我试过使用$（这个）。其他问题中也提到了这一点，但没有骰子

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

伊莱恩·汤普森添加框

• 01224732764
• 07739745612

$（文档）.ready（函数（）{ //隐藏“视图”分区。 $（'span.hideinfo'）.hide（）； $（'i.add'）。在（'click'，function（）上{ 变量图标=$（'.box'）； icon.toggleClass（'add'）； if（icon.hasClass（'add'））{ 图标文本（“添加框”）； $（'span.hideinfo'）.hide（）； }否则{ 图标文本（“不确定复选框”）； $（this.next（）.slideToggle（“slow”）； 返回false； } }); }); 只有当图标处于活动状态时，它才会更改。然后它会更改“不确定”复选框以显示此人的信息，然后再次单击该复选框，这样它会更改回“添加”框并隐藏信息。有任何提示吗？

您确实希望使用

$（this）

只处理单击的单个

元素，但是，使用

$（this）。next（）.slideToggle（）

不会切换任何内容，因为

嵌入在

中（它将尝试在
元素中选择下一个兄弟，但没有），相反，您希望首先选择父
元素（我使用了
.parent（）
，但您可以执行
.resistest（'p'）
或其他操作），然后选择下一个元素并滑动切换它

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

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


$（'.hideinfo'）.hide（）；
$（'i.add'）。单击（函数（）{
$（this）.toggleClass（'add'）.text(
$（this）.hasClass（'add'）？'add_box'：'Undeterminate_check_box'
).parent（）.next（）.slideToggle（）；
});

就像您在其他问题中发现的一样，您应该使用
var icon=$（此）
来代替
var icon=$（'.box'）
。前者将仅选择单击的
元素，而后者将选择具有
box
类的所有元素。此外，我不知道您正在使用
视图做什么div
，因为它没有包含HTML-在每个
标记后是否有
span.hideinfo
元素？也许更多的HTML和一点澄清将有助于找到问题的根源？谢谢你的评论。这是否能更好地澄清问题？是的，确实如此。请查看此编辑