Question

也许是与按钮的编号和元素相关的东西   添加类
  1 = 1
  2 = 2
  3 = 3
   ....

<script>
$('.item-carousel.1').click(function() {
  $('.og-expander:not(.og-expander.1)').removeClass('expander-act');
  $('.og-expander.1').toggleClass('expander-act');
  });
  
  $('.item-carousel.2').click(function() {
  $('.og-expander:not(.og-expander.2)').removeClass('expander-act');
  $('.og-expander.2').toggleClass('expander-act');
  });
    
  $('.item-carousel.3').click(function() {
  $('.og-expander:not(.og-expander.3)').removeClass('expander-act');
  $('.og-expander.3').toggleClass('expander-act');
  });

  $('.item-carousel.4').click(function() {
  $('.og-expander:not(.og-expander.4)').removeClass('expander-act');
  $('.og-expander.4').toggleClass('expander-act');
  });  
  <!-- ... -->
  
  </script>

Answer 1

您可以添加一个for循环并在数组上循环，并为每个循环创建事件侦听器，但是最好的选择是为所有相似的元素提供相同的类并使用Jquery each function

<script>
const carousel = [1,2,3,4]
for(let i=0,i<carousel.length; i++ ){

$('.item-carousel.'+carousel[i]+').click(function() {
  $('.og-expander:not(.og-expander.'+carousel[i]+')').removeClass('expander-act');
  $('.og-expander.'+carousel[i]+').toggleClass('expander-act');
  });
} 
  <!-- ... -->

  </script>

Answer 2

如果您可以后端访问HTML，则可以设置数据标签

<script>
  $('.item-carousel').click(function() {
    var curItem = $(this).data('item')

    $('.og-expander:not(.og-expander.'+curItem+')').removeClass('expander-act');
    $('.og-expander.'+curItem+'').toggleClass('expander-act');
  });
</script>

<div class="item-carousel" data-item="1"></div>
...

如何总结此功能而不必为每个按钮重复此功能？

2 个答案: