Как объединить несколько похожих скриптов jQuery?

Question

Есть вот такой вот код — https://jsfiddle.net/9tdoz47k/1/. Всё работает отлично, классы добавляются и удаляются. Но код выглядит слишком большим, как я могу его сократить?

$('.example-img').on('click', function() {
        $(this).parents('.example-part').addClass('active').siblings().removeClass('active');
})  


$('#example-part-1').on('click', function() {
        if ($(this).hasClass('active')) {
            $('.example-container').removeClass().addClass('example-container example-part-1');
        }
    })
    
$('#example-part-2').on('click', function() {
        if ($(this).hasClass('active')) {
            $('.example-container').removeClass().addClass('example-container example-part-2');
        }
    })
  
$('#example-part-3').on('click', function() {
        if ($(this).hasClass('active')) {
            $('.example-container').removeClass().addClass('example-container example-part-3');
        }
    })

.example-part{width:50px;height:50px;margin-bottom:20px}
.example-img{width:50px;height:50px}
#example-part-1{background:#000}
#example-part-2{background:#333}
#example-part-3{background:#666}

.example-part.active{background:red!important}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="example">
  <div class="example-container">
            
      <div class="example-part" id="example-part-1">    
          <div class="example-img"></div>
            <div class="example-hidden"></div>
        </div>
    
    <div class="example-part" id="example-part-2">
          <div class="example-img"></div>
      <div class="example-hidden"></div>
      </div>
    
    <div class="example-part" id="example-part-3">
          <div class="example-img"></div>
      <div class="example-hidden"></div>
      </div>
                
  </div>
</section>

Answer 1

Как минимум так:

$('.example-img').on('click', function() {
    $(this).parents('.example-part').addClass('active').siblings().removeClass('active');
})  

$('.example-part').on('click', function() {
    if ($(this).hasClass('active')) {
        $('.example-container').removeClass('active');
    }
});

.example-part{width:50px;height:50px;margin-bottom:20px}
.example-img{width:50px;height:50px}
#example-part-1{background:#000}
#example-part-2{background:#333}
#example-part-3{background:#666}

.example-part.active{background:red!important}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="example">
  <div class="example-container">
            
      <div class="example-part" id="example-part-1">    
          <div class="example-img"></div>
            <div class="example-hidden"></div>
        </div>
    
    <div class="example-part" id="example-part-2">
          <div class="example-img"></div>
      <div class="example-hidden"></div>
      </div>
    
    <div class="example-part" id="example-part-3">
          <div class="example-img"></div>
      <div class="example-hidden"></div>
      </div>
                
  </div>
</section>

А можно ещё меньше:

$('.example-img').on('click', function() {
    $(this).parents('.example-part').addClass('active').siblings().removeClass('active');
})

.example-part{width:50px;height:50px;margin-bottom:20px}
.example-img{width:50px;height:50px}
#example-part-1{background:#000}
#example-part-2{background:#333}
#example-part-3{background:#666}

.example-part.active{background:red!important}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="example">
  <div class="example-container">
            
      <div class="example-part" id="example-part-1">    
          <div class="example-img"></div>
            <div class="example-hidden"></div>
        </div>
    
    <div class="example-part" id="example-part-2">
          <div class="example-img"></div>
      <div class="example-hidden"></div>
      </div>
    
    <div class="example-part" id="example-part-3">
          <div class="example-img"></div>
      <div class="example-hidden"></div>
      </div>
                
  </div>
</section>

Не понял зачем нужно это $('.example-container').removeClass('active');. Но можно вставить там где нужно))

БЛОГ НА HUSL

Как объединить несколько похожих скриптов jQuery?

Ответы (1 шт):