jQuery 切换图像

Question

我遇到了一种情况，我不理解 jQuery 的 Toggle。

我有两个按钮，它们都打开相同的内容，当您单击任一按钮时，内容应该打开或关闭，并且属性将按钮从打开更改为关闭。 (因此两个按钮执行相同的功能)。

唯一的问题是，当我单击顶部按钮并打开我的内容，然后单击底部按钮将其关闭时，图像属性切换不正确。

这是我的代码的一个非常精简的版本，我希望得到一些帮助。

<script language="javascript" type="text/javascript">
    $(function () {

        var open = false;

        $("#button1, #button2").toggle(
            function () {
                open = true;
                $("#button1").attr("src", "images/btn-open.gif");
                $("#button2").attr("src", "images/btn-open.gif");
            },
            function () {
                if (open) {
                    $("#button1").attr("src", "images/btn-closed.gif");
                    $("#button2").attr("src", "images/btn-closed.gif");

                } else {
                    $("#button1").attr("src", "images/btn-open.gif");
                    $("#button2").attr("src", "images/btn-open.gif");

                }
                open = false;

            }
        );


    });
</script>

<img id="button1" src="images/btn-open.gif"></img>
<br />
<br />
<br />
<br />
<img id="button2" src="images/btn-open.gif"></img>

Answer 1

.toggle()每个元素的每次点击都会在 n(通常是 2 个，但不限于 2)个提供的函数之间循环，但您需要一个开关来两者 em> 按钮，并非每个按钮都独立切换，因此请检查并使用 .click() ，像这样:

var open = false;
$("#button1, #button2").click(function () {
  open = !open; //toggle it
  $("#button1, #button2") //set the src based on the new state
     .attr("src", "images/btn-" + (open ? "open" : "closed") + ".gif");
});

我也combined your selectors为了让它更整洁一点，它的效果是一样的:)我不能100%确定你的图像名称，所以你可能需要切换 bool 值，但你明白了。