Как я могу обобщить эту функцию, не повторяя ее для каждой кнопки? - PullRequest
Новая
       34

Как я могу обобщить эту функцию, не повторяя ее для каждой кнопки?

1 голос
/ 29 апреля 2019

Может быть, что-то, что связывает номер кнопки и элемента добавить класс
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>

Ответы [ 2 ]

0 голосов
/ 29 апреля 2019

если у вас есть внутренний доступ к 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>
...
0 голосов
/ 29 апреля 2019

Вы можете добавить цикл for и loop над массивом и создать прослушиватели событий для каждого, но лучшим вариантом будет присвоить всем одинаковым элементам один класс и использовать Jquery для каждой функции 

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