Question

下面是简单的HTML form，页面上有两组控件第一组，第二组。第一组的脚本非常适合动画。如何使该脚本适用于不同类型的集合。想象一下，我有30个这样的集合，我需要做动画，如何将选择器名称作为参数传递给JQuery？

        <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { background:#def3ca; margin:3px; width:80px;
      display:none; float:left; text-align:center; }
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>

 <!-- first set -->       
      <button id="showr">Show</button>
      <button id="hidr">Hide</button>
      <div>who are you?</div>

 <!-- second set --> 
     <button id="showr1">Show</button>
      <button id="hidr1">Hide</button>
      <div id="div1">how are you?</div>


<!-- script works on First set -->
    <script>
    $("#showr").click(function () {
      $("div").first().show("fast", function showNext() {
        $(this).next("div").show("fast", showNext);
      });
    });

    $("#hidr").click(function () {
      $("div").hide(1000);
    });
    </script>



    </body>
    </html>

Answer 1

使用类来指定不同类型的元素，而不是使用ID：

HTML -

  <button class="showr">Show</button>
  <button class="hidr">Hide</button>
  <div class="content">who are you?</div>

JS -

//bind `click` event handler to the `.showr` elements
$('.showr').on('click', function () {

    //hide this button (.showr), show the next one (.hidr), then show the content
    $(this).slideUp('fast').next().slideDown('fast').next().slideDown('fast');
});

//bind `click` event handler to the `.hidr` elements
$('.hidr').on('click', function () {

    //hide this button (.hidr), show the previous button (.showr), then hide the content
    $(this).slideUp('fast').prev().slideDown('fast').end().next().slideUp('fast');
});

CSS -

.hidr, .content {
    display : none;
}

请注意.on()是jQuery 1.7中的新功能，在这种情况下与.bind()相同。

以下是演示：http://jsfiddle.net/2wEW5/

Answer 2

你应该切换到班级。您不能拥有具有相同ID的多个对象，但是一个类可以位于多个对象上，然后jQuery中的单个操作可以对多个对象进行操作。我建议将HTML更改为：

<!-- first set -->       
 <div class="container">
     <button class="showr">Show</button>
     <button class="hidr">Hide</button>
     <div class="msg">how are you?</div>
 </div>

 <!-- second set --> 
 <div class="container">
     <button class="showr">Show</button>
     <button class="hidr">Hide</button>
     <div class="msg">how are you?</div>
 </div>

 <!-- third set --> 
 <div class="container">
     <button class="showr">Show</button>
     <button class="hidr">Hide</button>
     <div class="msg">how are you?</div>
 </div>

然后，脚本可以是这样的：

<script>
$(".showr").click(function () {
  $(this).closest(".container").find(".msg").show();
});

$(".hidr").click(function () {
  $(this).closest(".container").find(".msg").hide(1000);
});
</script>

通过使用.closest()并创建容器div并为hide / show提供目标div，我们使jQuery代码更加独立于确切的物理HTML，因此它不依赖于元素之间没有任何东西。

如果你试图让它们全部级联，那么当你显示第一个时，那么（一次一个）显示所有其他的（无论有多少），你可以这样做：

<script>
$(".showr").click(function () {

    function showItem(container)
        container.find(".msg").show(function() {
            showItem(container.next(".container"));
        });
    }

    showItem($(this).closest(".container"));
});

$(".hidr").click(function () {
    $(this).closest(".container").find(".msg").hide(1000);
});
</script>

传递选择器名称作为参数

2 个答案: