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％肯定你的图像名称所以你可能需要切换布尔值，但你明白了。

jQuery切换切换图像

1 个答案: