javascript - 有没有更简洁的方式来编写JS来显示和隐藏？

Question

嗨，我在这里有一个 fiddle 设置，它有 2 个列表项，单击时它们通过切换显示/隐藏 div 来显示 - 每个列表项都有不同的内容。

我担心的是我编写的 JS 来控制它的方式。有更好的方法吗？

谢谢

https://jsfiddle.net/b0xamuj8/

html:

<ul>
    <li class="revealerone">item 1</li>
    <li class="revealertwo">item 2</li>
</ul>

<div class="revealed one">this is some content one</div>
<div class="revealed two">this is some content two</div>

CSS:

ul {
    list-style-type: mome;
    margin: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

.revealed {
    display: none;
    background: green;
}

JS:

 $(document).ready(function() {
        $(".revealerone").click(function() {
            $(".one").slideToggle("slow");
        });
    });

    $(document).ready(function() {
        $(".revealertwo").click(function() {
            $(".two").slideToggle("slow");
        });
    });

Answer 1

您可以使用 data 属性来确定哪个“revealer”与哪个“revealed”匹配:

$(document).ready(function() {
    $(".revealer").click(function() {
        var id = "#" + $(this).data('item');
        $(id).slideToggle("slow");
    });
});

ul { list-style-type: none; margin: 0; }

li { display: inline-block; margin: 0 10px; }

.revealed { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="revealer" data-item="one">item 1</li>
    <li class="revealer" data-item="two">item 2</li>
</ul>

<div class="revealed" id="one">this is some content one</div>
<div class="revealed" id="two">this is some content two</div>