Как сделать, чтобы класс взаимодействовал только с определенными блоками?

Question

Как сделать так, чтобы каждый class ".filter{0-9]" взаимодействовал с ".filter-block{0-9]", а с другими блоками нет?

Код:

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter").length) {
    $('.filter-block').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter2").length) {
    $('.filter-block2').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter3").length) {
    $('.filter-block3').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter4").length) {
    $('.filter-block4').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter5").length) {
    $('.filter-block5').hide(); 
  }
  e.stopPropagation();
});

Answer 1

Классика

$(document).on('click', '.filter', function() {
    $('.filter').not(this).find('.filter-block').hide();
    $(this).find('.filter-block').show();
});

$(document).on('click', function(e) {
    e.stopPropagation();
    
    if (!$(e.target).closest('div').hasClass('filter'))
        $('.filter .filter-block').hide();
});

.filter {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div>
    <div class="filter">
        <a class="filter-link-top" href="#" onclick="$('.filter-block-sort').toggle();return false;"> Сортировать</a> 
        <ul class="filter-block filter-block-sort" aria-labelledby="filter-block"><li>1.1</li><li>1.2</li><li>1.3</li></ul>
    </div>
    <div class="filter">
        <a class="filter-link-top" href="#" onclick="$('.filter-block-sort').toggle();return false;"> Сортировать</a> 
        <ul class="filter-block filter-block-sort" aria-labelledby="filter-block"><li>2.1</li><li>2.2</li><li>2.3</li></ul>
    </div>
    <div class="filter">
        <a class="filter-link-top" href="#" onclick="$('.filter-block-sort').toggle();return false;"> Сортировать</a> 
        <ul class="filter-block filter-block-sort" aria-labelledby="filter-block"><li>3.1</li><li>3.2</li><li>3.3</li></ul>
    </div>
    <div class="filter">
        <a class="filter-link-top" href="#" onclick="$('.filter-block-sort').toggle();return false;"> Сортировать</a> 
        <ul class="filter-block filter-block-sort" aria-labelledby="filter-block"><li>4.1</li><li>4.2</li><li>4.3</li></ul>
    </div>
</div>

БЛОГ НА HUSL

Как сделать, чтобы класс взаимодействовал только с определенными блоками?

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