Question

我希望在单击按钮时切换两个div（一个显示代替另一个），但是当我单击按钮时，按钮消失，div不会切换。

<button id="change" class="btn">Change</button>
<div id="FTE" style="border:2px solid #09F">
    Contents 1
</div>

<div id="ETF" style="border:2px solid #09F">
    Contents 2
</div>

$(document).ready(function () {
    $("#ETF").show();
    $("#FTE").hide();
    $("#change").click(function () {
        $("#change").toggle(function (){
            $("#change").text("First");
            $("#FTE").hide(1000);
        }, function() {
            $("#change").text("Second");
            $("#ETF").show(1000);
        });
    });
});

Answer 1

http://jsbin.com/alomew/4/edit

$(function () { // DOM ready shorthand

    $("#ETF").show();
    $("#FTE").hide();

    var changeTxt = ["Second","First"];

    $("#change").click(function () {       
        $(this).text( changeTxt.reverse()[0] );
        $("#FTE, #ETF").toggle( 1000 );      
    });

});

我厌倦了使用Conditional Operator切换两个值，
$(this).text( $(this).text() == "foo" ? "bar" : "foo" ); 最近我想到了一个不错的小技巧：

changeTxt.reverse()[0]（与已经建议的名称一样）将在每次点击changeTxt数组时反转，并取第一个（0索引）数组键值。

_{其他文档：}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

Answer 2

.toggle（）更改匹配元素（按钮）的可见性。然后你试图隐藏已经隐藏的FTE元素并显示已经显示的ETF元素。

jquery switch divs按钮点击不起作用

2 个答案: