如何壓縮.show和.hide jQuery？

Question

我是jQuery的新手，我知道必須有越來越少的代碼才能做到這一點。 所以，我這里有兩個div。 第一名將在不同的div中顯示一個班級。 用戶完成操作后，“ div 2”將隱藏此元素，然后單擊“ div 2”。 我覺得我的jQuery代碼太長了。 這是我的JSFIDDLE。 https://jsfiddle.net/g812sqry/

<div class="container">
    <div>
        <p id="one">Div One</p>
    </div>
    <div>
        <p id="two">Div Two</p>
    </div>
</div>


#one {
    width:60px;
    background-color:green;
    padding:10px;
    cursor:pointer;
}
#two {
    width:60px;
    background-color:green;
    padding:10px;
    display:none;
    cursor:pointer;
}

$(document).ready(function () {
    $('#one').click(function () {
        $(this).hide();
    });
    $('#one').click(function () {
        $('#two').show();
    });
    $('#two').click(function () {
        $(this).hide();
    });
    $('#two').click(function () {
        $('#one').show();
    });

});

Answer 1

嘗試使用.toggle()

$(document).ready(function () {
    var elems = $("#one, #two");
    elems.click(function () {
        elems.toggle()
    });
})

jsfiddle https://jsfiddle.net/g812sqry/4/

Answer 2

您可以合並兩個選擇器的單擊事件。

$(document).ready(function () {
    $('#one, #two').click(function () {
        $('p').show();
        $(this).hide();
    });
});

檢查小提琴

Answer 3

這樣更好。

$(document).ready(function () {
    $('#one').click(function () {
        $(this).hide();
        $('#two').show();
    });
    $('#two').click(function () {
        $(this).hide();
        $('#one').show();
    });
});

Answer 4

您已經在調用$('#divID').click()函數，而無需再次為#one和#two DIV調用它

  $(document).ready(function () { $('#one').click(function () { $(this).hide(); $('#two').show(); }); $('#two').click(function () { $(this).hide(); $('#one').show(); }); }); 

 #one { width:60px; background-color:green; padding:10px; cursor:pointer; } #two { width:60px; background-color:green; padding:10px; display:none; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div> <p id="one">Div One</p> </div> <div> <p id="two">Div Two</p> </div> </div> 

Answer 5

嘗試這個。 消除了對id的依賴。

$('p').click(function () {
        $('p').toggle();       
    });

https://jsfiddle.net/g812sqry/5/