我正在使用w3schools的插件来过滤元素。它在我的项目之一中完美运行。但是现在我试图在我的另一个项目中使用它,但是它不起作用。这是代码笔:
https://codepen.io/zakero/pen/mZYBPz
任何人都可以找到一个问题吗?
Javascript:
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("work-images");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
答案 0 :(得分:0)
似乎您在display: none;
中忘记了.work-images
。
对于is-checked
类。如果您不想使用jQuery,只需使用w3school代码。
var btnContainer = document.getElementById("filters");
var btns = btnContainer.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("is-checked");
current[0].className = current[0].className.replace(" is-checked", "");
this.className += " is-checked";
});
}
答案 1 :(得分:0)
对不起,但是编写一个新的过滤器比解决一个故障要容易得多。
我更改了 HTML (添加了 data-filtertype 属性),并编写了调用该过滤器的 jQuery click函数( filterByType )。
更简单的代码,更少出错的地方。如果您唯一需要的只是简单地过滤图像,则可以。 (这就是为什么建议写出您想要的结果的原因-实现该结果的方法并不总是您所想的那样。)
$(".button").on('click', function(e) {
e.preventDefault();
filterByType($(this).attr('data-filtertype'))
})
function filterByType(type) {
$('.work-images').each(function(i, e) {
if (type !== 'all' && !$(e).hasClass(type)) {
$(e).hide()
} else {
$(e).show()
}
})
}
* {
box-sizing: border-box;
}
.button {
display: inline-block;
padding: 10px 40px;
background: #FF6760;
border: none;
font-weight: bold;
color: #fff;
font-family: lato_lightregular;
font-size: 14px;
cursor: pointer;
text-transform: uppercase;
}
.button:hover {
background: #616161;
color: #fff;
}
.button:active,
.button.is-checked {
background-color: #616161;
outline: 0;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.button-group {
margin-bottom: 20px;
}
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
border-radius: 5px;
margin-left: 0;
margin-right: 8px;
}
.grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 10px -16px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
.work-images {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
border: 11px solid #fff;
}
.work-images img {
vertical-align: middle;
width: 100%;
height: 210px;
}
.work-images img:hover {
filter: none;
}
.close {
text-decoration: none;
float: right;
font-size: 24px;
font-weight: bold;
color: white;
}
.content {
display: inline-block;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="portfoliosection">
<div class="container">
<div class="myworks text-center">
<h2>Our Featured Works</h2>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
<div class="work-filter">
<div id="filters" class="button-group">
<button class="button is-checked" data-filtertype="all"> All</button>
<button class="button" data-filtertype="web"> Web Design</button>
<button class="button" data-filtertype="mob"> Mobile Design</button>
<button class="button" data-filtertype="photo"> Photography</button>
</div>
<div class="grid">
<div class="work-images web">
<img src="https://i.imgur.com/FZED8Yb.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images mob">
<img src="https://i.imgur.com/Jzts3Bm.jpg" onclick="onClick(this)" alt="Mobile Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/IC4tsi0.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images mob">
<img src="https://i.imgur.com/1x1X5S6.jpg" onclick="onClick(this)" alt="Mobile Design">
</div>
<div class="work-images web">
<img src="https://i.imgur.com/RckvhDi.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/zjteEnm.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images web">
<img src="https://i.imgur.com/i34YqDD.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/2qwcGam.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images mob">
<img src="https://i.imgur.com/CoEb43e.jpg" onclick="onClick(this)" alt="Mobile Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/EemBYgT.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images web">
<img src="https://i.imgur.com/RdDfJUp.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/FeKM3fp.jpg" onclick="onClick(this)" alt="Photography">
</div>
</div>
</div>
</div>
</div>
</section>