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

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)您可以使用带有选择器的属性启动 [name ^ ="value"]来选择具有指定属性的元素,其值始于给定字符串.

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

4)使用匹配()和正确的正则表达式来获取链接的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();
        });
    });
})

更新小提琴

Answer 2

改为:

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

记住要添加id的div的href链接.

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