0

На странице есть кнопки которые определенным образом фильруют картинки. По нажатию одной из 4 кнопок, срабатывает фильтр и несколько картинок скрываются, остальные остаются видимыми. Вопрос как эта строчка работает "div*[filter !='"+$(this).attr('filter')+"']")" ? Как объяснить на пальцах что она делает ?

   <button class="button" filter="all">All</button>
        <button class="button" filter="wd">Web design</button>
        <button class="button" filter="ud">Ui/Ux design</button>
        <button class="button" filter="moc">Mockups</button>
      </div>
    </div>
    <div class="row filter">
      <div filter="wd" class="col-xl-4"><img src="img/item1.png" alt=""></div>
      <div filter="moc" class="col-xl-4"><img src="img/item2.png" alt=""></div>
      <div filter="wd" class="col-xl-4"><img src="img/item3.png" alt=""></div>
      <div filter="moc" class="col-xl-4"><img src="img/item4.png" alt=""></div>
      <div filter="ud" class="col-xl-4"><img src="img/item5.png" alt=""></div>
      <div filter="ud" class="col-xl-4"><img src="img/item6.png" alt=""></div>
    </div>
$(".button").click(function() {
  if($(this).attr("filter") && $(this).attr("filter") !== "all"){
    $(".filter > div*[filter !='"+$(this).attr('filter')+"']").fadeOut(350);
    $(".filter > div*[filter ='"+$(this).attr('filter')+"']").fadeIn(350);
  }else{
   $(".filter > div").fadeIn(350);
  }
});

$(".button").click(function() {
  if ($(this).attr("filter") && $(this).attr("filter") !== "all") {
    $(".filter > div*[filter !='" + $(this).attr('filter') + "']").fadeOut(350);
    $(".filter > div*[filter ='" + $(this).attr('filter') + "']").fadeIn(350);
  } else {
    $(".filter > div").fadeIn(350);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" filter="all">All</button>
<button class="button" filter="wd">Web design</button>
<button class="button" filter="ud">Ui/Ux design</button>
<button class="button" filter="moc">Mockups</button>
<div class="row filter">
  <div filter="wd" class="col-xl-4"><img src="img/item1.png" alt="">1</div>
  <div filter="moc" class="col-xl-4"><img src="img/item2.png" alt="">2</div>
  <div filter="wd" class="col-xl-4"><img src="img/item3.png" alt="">3</div>
  <div filter="moc" class="col-xl-4"><img src="img/item4.png" alt="">4</div>
  <div filter="ud" class="col-xl-4"><img src="img/item5.png" alt="">5</div>
  <div filter="ud" class="col-xl-4"><img src="img/item6.png" alt="">6</div>
</div>

2 ответа 2

2

Ищется класс filter и далее все дочерние элементы div данного класса, у которых атрибут filter не равен атрибуту filter кнопки по которой произошёл клик. И далее эти атрибуты скрываются за 350ms. Это если говорить о данной строчке:

$(".filter > div*[filter !='" + $(this).attr('filter') + "']").fadeOut(350);

Строчка после неё показывает остальные элементы, которые не должны быть скрыты таким же образом

3
  • А звездочка зачем?
    – user176262
    Commented 17 окт. 2019 в 22:01
  • 1
    @Igor, просто так валяется.
    – Qwertiy
    Commented 17 окт. 2019 в 22:19
  • @Igor думаю что опечатка, честно не нашёл объяснения данного применения, так как без него поведение аналогичное Commented 17 окт. 2019 в 22:29
2

jQuery позволяет использовать кастомные селекторы. Браузером такие селекторы не поддерживаются, однако jQuery их преобразует во что-нибудь, после чего самостоятельно дофильтровывает найденный результат.

В данном случае использованы две такие возможности:

  • селектор на неравенство в атрибуте [attr!=value] чтобы найти элементы, у которых такого атрибута нет, либо он есть с другим значением
  • возможность зафигачить в селектор звёздочку вместе с тегом - вроде бы абсолютно бесполезная возможность, я даже не уверен, что она документированная - вероятно так делать не надо, а то будет как с href когда-то.

function check(selector) {
  try {
    return !!document.querySelectorAll(selector)
  } catch (e) {
    return false
  }
}

function log(selector) {
  var $els = $(selector)
  console.log(`${selector}
selector ${check(selector) ? "is" : "is NOT"} valid
found: ${$els.length}
${[...$els].map(x => x.outerHTML.slice(0, 64)).join(`
`)}`)
}

log("div")
log("div*")
log("*div")
log("*div*")

log("div[qqq=abc]")
log("div[qqq!=abc]")

log("div*[qqq=abc]")
log("div*[qqq!=abc]")
.as-console-wrapper.as-console-wrapper { max-height: 100vh }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div></div>
<div qqq="abc"></div>
<div qqq="cde"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.