javascript - jQuery 导航数组，寻找优雅的解决方案

Question

我一直在尝试想出最优雅的方式来实现以下目标......

我有以下导航结构:

    <div class="menu-wrap">
    <ul id="smenu">
      <li><a class="selected" href="#">1</a></li>
      <li><a class="" href="#">2</a></li>
      <li><a class="" href="#">3</a></li>
      <li><a class="" href="#">4</a></li>
      <li><a class="" href="#">5</a></li>
      <li><a class="" href="#">6</a></li>
      <li><a class="" href="#">7</a></li>
    </ul>
  </div>

这个 div 在页面的其他地方:

    <div class="desc-wrap">
    <p>blah blah blah</p>
    <p>blah blah blah</p>
    <p>blah blah blah</p>
    <p>blah blah blah</p>
    <p>blah blah blah</p>
    <p>blah blah blah</p>
    <p>blah blah blah</p>
</div>

默认情况下，p 全部隐藏；如果我单击第一个 li，我希望第一个 p 显示，等等。很简单吧？我已经用几种不同的方式实现了它，但我一直认为我应该能够用更少的行数来完成它。

这是我的 super 蹩脚的，添加了类名:

        $("#smenu li").click(function() {
    $(".desc-wrap p").hide();       
});
$("li.desc-one").click(function() {
    $("p.desc-one").show();
});
$("li.desc-two").click(function() {
    $("p.desc-two").show();
});
$("li.desc-three").click(function() {
    $("p.desc-three").show();
});
$("li.desc-four").click(function() {
    $("p.desc-four").show();
});
$("li.desc-five").click(function() {
    $("p.desc-five").show();
});
$("li.desc-six").click(function() {
    $("p.desc-six").show();
});
$("li.desc-seven").click(function() {
    $("p.desc-seven").show();
});

这是我的数组尝试的开始，但您可以看到它的走向:

        var mappedPs = $(".desc-wrap p").map(function (index) {
    if (index == 0) {
        $(this).show();
    }
    else {
        $(this).hide();
    }
});
var mappedList = $("#smenu li").map(function (index) {
    if (index == 0) {
        $("#smenu li").click(function() {
            $(mappedPs[0]).show();
        });
    }
    else {
        $(mappedPs[1,2,3,4,5,6]).hide();
    }
});

我是否遗漏了一些明显的东西？我觉得这应该比结果简单得多......

Answer 1

为什么不直接使用 .index() ？

$('#smenu li').click(function(){
    $('.desc-wrap p').hide().eq($(this).index()).show();
});