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

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

2）您可以使用 Attribute Starts With 选择器[name ^ =＆＃34; value＆＃34;]来选择具有指定属性的元素，其值始于给定值字符串。

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 2

请改为：

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

请务必在链接的id中添加div的{{1}}。

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

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

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

需要一个建议，以避免多种功能

3 个答案: