傳遞選擇器名稱作爲參數

下面是簡單的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>

來源

2012-02-07 Broken Link

您應該切換到班。你不能有多個具有相同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容器，並給予目標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>

來源

2012-02-07 19:20:09 jfriend00

代替使用的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/

來源

2012-02-07 19:20:09 Jasper

在'jsfiddle'中創建一個帳戶，它將保留您創建的所有演示。 – ShankarSangoli 2012-02-07 19:25:42

傳遞選擇器名稱作爲參數

回答

相關問題