Question

我的一个页面上排列了七张图像。我有显示/隐藏功能工作，它显示奇数图像与“奇数”按钮，并显示偶数图像与“偶数”按钮。它现在的工作方式是，如果你点击奇数按钮，它只显示奇数。对于偶数人而言，反之亦然。

然而，如果显示奇数图像并且我点击偶数按钮，我希望它们全部显示，因此它将它们添加到已经显示的内容中。如果没有显示任何内容，单击偶数按钮应该只显示偶数图像？奇怪的图像也一样。

但如果当前显示所有图像，则单击偶数应显示偶数图像并隐藏奇数...单击奇数应显示奇数并隐藏偶数。

我希望这是有道理的。我不知道如何让它工作。我需要条件声明吗？我只是不知道我会检查什么。

这是工作代码，但不是我希望它如何工作。

<script>
$(function () {
    $("#evenButton").click(function () {
        $("img").show("slow");
        $("img:even").show("slow");
    });
})
</script>

<script>
$(function () {
    $("#oddButton").click(function () {
        $("img").show("slow");
        $("img:even").hide("slow");
        $("img:odd").show("slow");
    });
})
</script>

Answer 1

我发现很难理解你的问题，但是你想让图像只在按下按钮时在隐藏和显示之间切换？

我根据你的问题的另一个阅读进行了更新

$("#evenButton").click(function () {
    if($("img:even").is(':visible') && $("img:odd").is(':visible')) {
        $("img:odd").toggle("slow");        
    } else {
        $("img:even").show("slow");
    }
});

$("#oddButton").click(function () {
    if($("img:odd").is(':visible') && $("img:even").is(':visible')) {
        $("img:even").toggle("slow");        
    } else {
        $("img:odd").show("slow");
    }
});

http://jsfiddle.net/HXycX/2/

Answer 2

如果我正确地提出了你的问题，你希望你的按钮能够切换偶数或奇数的状态，而不仅仅是显示它们。为此，您需要存储按钮的相应图像是否显示在变量中。这样的事情可以奏效：

var evenImagesVisible = false;

function toggleEvenImages() {
    evenImagesVisible = !evenImagesVisible // flip the state of the even images

    if (evenImagesVisible) {
         $("img:even").show("slow");
    }
    else {
         $("img:even").hide("slow");
    }
}

这是仅切换偶数图像的方法。切换奇怪的图像完全相同，只需更改一些变量名称和选择器。

混淆了jQuery show / hide for images

2 个答案: