Question

我是jQuery的新手，我知道必须有更快，更少的代码才能做到这一点。所以，我这里有两个div。 Div one将在不同的div中显示一个类。一旦用户完成并点击div 2，Div 2将隐藏此元素。我觉得我的jquery代码太长了。这是我的JSFIDDLE。 https://jsfiddle.net/g812sqry/

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();
    });
});

<强> Check Fiddle

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/

我如何压缩我的.show和.hide jQuery？

5 个答案: