Question

单击图标（在班级内部）时，所有相同的图标都会更改。

我尝试使用$（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()不会切换任何内容，因为{ {1}}嵌入在中（它会尝试选择元素中的下一个同级兄弟，而没有任何同级），而是要选择父级元素优先（我使用，但您可以做.parent()或其他操作），然后选择下一个元素并.closest('p')。

slideToggle

https://jsfiddle.net/5p3mu1db/

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

1 个答案: