需要建议以避免多种功能

Question

我正在尝试使用 jQuery 编写一个允许我显示或隐藏 DIV 的函数。这里是代码示例，我只需要帮助重写函数以避免重复：

<ul id="link">
  <li>
    <a id="myLink1" href="javascript:;">Lister</a>
  </li>
  <li>
    <a id="myLink2" href="javascript:;">Afficher</a>
  </li>
</ul>

<div id="contenu">
<div id="myDiv1">             
  <p> Bienvenue </p> 
</div>
<div id="myDiv2">             
   <p> bob </p>
</div>
</div>

JAVASCRIPT

$(document).ready(function(){
       var par = $("#myDiv1");
       $(par).hide();
      $("#myLink1").click(function(e){
        $(par).toggle();
        e.preventDefault();
      });

    });

    $(document).ready(function(){
       var par = $("#myDiv2");
       $(par).hide();
      $("#myLink2").click(function(e){
        $(par).toggle();
        e.preventDefault();
      });

    });

JSFiddle

谢谢

Answer 1

改为这样做：

$(document).ready(function () {
    $('a').click(function (e) {
        e.preventDefault();
        $($(this).attr('href')).toggle();
    });
});

记得在链接的href 中添加div 的id。

工作 jsFiddle：http://jsfiddle.net/jbv4Y/1/

Answer 2

1) 你只需要一个 DOM 就绪处理程序 $(document).ready(function(){...});

2) 您可以使用 Attribute Starts With 选择器 [name^="value"] 来选择具有指定属性且值正好以给定字符串开头的元素。

3) 使用 .each() 循环遍历所有 id 名称以myLink 开头的链接

4) 使用 match() 和适当的正则表达式来获取链接的 id 号，然后分别使用该 id 号切换 div。

$(document).ready(function () {
    $('[id^="myDiv"]').hide();
    $('[id^="myLink"]').each(function () {
        $(this).click(function (e) {
            e.preventDefault();
            var id = $(this).attr('id').match(/\d+$/);
            $('#myDiv' + id).toggle();
        });
    });
})

Updated Fiddle

Answer 3

您可以添加一些类和 href 来定位要切换的元素

<ul id="link">
    <li>
        <a id="myLink1" class="trigger" href="#myDiv1" >Lister tout</a>
    </li>
    <li>
        <a id="myLink2" class="trigger" href="#myDiv2">Afficher Membre</a>
    </li>
</ul>

<div id="contenu">
    <div id="myDiv1" class="target">             
        <p> Bienvenue </p> 
    </div>
    <div id="myDiv2" class="target">             
        <p> bob </p>
    </div>
</div>

然后

$(document).ready(function () {
    //add the class target to add divs that are targeted by the links
    $(".target").hide();
    //all the links which need to trigger the toggle should have the class trigger
    $(".trigger").click(function (e) {
        e.preventDefault();
        //the href property of the link must have the id of the div to toggle prefixed with #
        $($(this).attr('href')).toggle()
    });
});

演示：Fiddle

---

您甚至可以使用基于索引的解决方案来简化它，如下所示，但我不推荐它

<ul id="link">
    <li>
        <a id="myLink1" href="#" >Lister tout</a>
    </li>
    <li>
        <a id="myLink2" href="#">Afficher Membre</a>
    </li>
</ul>

<div id="contenu">
    <div id="myDiv1">
        <p> Bienvenue </p> 
    </div>
    <div id="myDiv2">
        <p> bob </p>
    </div>
</div>

然后

$(document).ready(function () {
    var $targets = $("#contenu > div").hide();

    $("#link a").click(function (e) {
        e.preventDefault();

        $targets.eq($(this).parent().index()).toggle()
    });
});

演示：Fiddle

这取决于#link中li元素的顺序和#contenu中的内容是否相同。