На странице есть кнопки которые определенным образом фильруют картинки. По нажатию одной из 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>