Question

我无法通过按钮点击事件切换两个元素（div）。我有demo here

我的代码是这样的：

<div id="green"></div>
<div id="red"></div>
<button>Call Red</button>
<script>
$(document).ready(function(){
 $("button").click(function () {
  $("#green").show();
  $("#red").hide();
 });
});
</script>

和css看起来像：

#red {
    border:1px solid black;
    width:50px;
    height:50px;
    background-color:red;
}
#green {
    border:1px solid black;
    width:50px;
    height:50px;
    background-color:green;
    display:none;
}

我需要的是使用切换功能来改变两个div之间的可见性并更改基于下一个颜色的按钮值。你能告诉我怎么做吗？

Answer 1

function ButtonText() {
    if ($("#green").is(":visible")) {
        $("button").text("Call Red");
    } else {
        $("button").text("Call Green");
    }
}

ButtonText();
$("button").click(function () {
    $("#green").toggle();
    $("#red").toggle();
    ButtonText();
});

<强> JSFIDDLE DEMO

你没有在你的小提琴中加入jQuery。

Answer 2

变化：

 $("#green").show();
  $("#red").hide();

要：

 $("#green").toggle();
  $("#red").toggle();

通过一键式按钮在两个分区之间切换

2 个答案: