Question

我是新手，所以请耐心等待我：）

所以我正在创建一个照片库，我使用了复选框来过滤它们。实际上这些是电影海报的照片，我想根据它们的类型和年份来过滤它们。

复选框工作正常。也适用于多种选择。但多重选择的问题是当你取消选择其中一个时。

例如：

我有复选框A，B和C.

当我选择A和B时，它只会显示包含A和B类的图像，它将删除其余部分。所以它的工作方式很好。

但是当我取消选中其中一个＆＃34;检查＆＃34;盒子，例如我会取消选择A，它应该只显示那些带有B类的图像。会发生什么情况会返回不属于B类的其他图像。代码是否有问题，尤其是条件部分？

<script type="text/JavaScript">
buttons = document.querySelectorAll("#insidefilter input[type=checkbox]");

animationstring = 'animation',
animation = false,
keyframeprefix = '',
domPrefixes = 'webkit moz o khtml'.split(' '),
pfx = '',
content = document.getElementById("content");
if (content.style.animationName !== undefined) {
    animation = true;
}
if (animation === false) {
    for (var i = 0; i < domPrefixes.length; i++) {
        if (content.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
            pfx = domPrefixes[i];
            animationstring = pfx + 'Animation';
            animation = true;
            break;
        }
    }
}

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', filter, false);
}

function filter() {
    movie = this.id;
    notMovie = document.querySelectorAll("img:not(." + movie + ")");
    for (var i = 0; i < notMovie.length; i++) {
        if (this.checked) {
            notMovie[i].style[animationstring] = "fadeandsmallify 1.6s forwards";
        } else {
            notMovie[i].style[animationstring] = "solidandlarger 1.6s";
        }
    }
};
</script>

我在网上复制了它并自己编辑了部分内容。我无意将它用于赚钱，仅用于练习目的。感谢能帮助我的人。请忽略与复选框无关的其他代码。我没有删除它，因为老实说，我不明白他们中的一些人做了什么。遗憾。

PS：insidefilter是我编码流派的复选框的div，insidefilteryear是我年份的复选框，内容是显示图像的div。我将两组复选框分开，因为我想禁用过滤器中的其他复选框＆＃34; year＆＃34;当一个人被检查时，因为电影不可能超过一年，但它可以有多个类型。

示例HTML：

<div id="insidefilteryear">
<form>
<input type="checkbox" id="xiii">2013</input>
</form>
</div>

<div id="insidefilter">
<form>
<input type="checkbox" id="act">Action</input>
</form>
</div>

<div id="content">
<img src="images/e1.jpg" style="width:120px;height:170px;" alt class="act    xiii" title="Escaple Plan - 2013">
</div>

复选框无法正常工作

0 个答案: