Question

我需要在同一页面上使用jQuery切换效果3次。

我有这段代码：

<input type="button" id="click" value="Click">
<div id="show_hide">Text goes here...</div>

和这个脚本（我在Wordpress中使用它）：

jQuery(document).ready(function(){
    jQuery("#show_hide").hide();

    jQuery("#click").click(function(){
        jQuery("#show_hide").toggle();
    });
});

现在我的问题是：如何为3个按钮/ div使用相同的脚本？使用它3次使用不同的ID听起来对我来说是多余的。我试着想知道我是否以及如何将某种变量传递给脚本以告诉哪个div显示...但我找不到解决方案......

Answer 1

您可以将事件绑定到所有三个按钮，并使用适用于所有这些按钮的特定选择器。然后处理程序处理特定的案例

$('.toggle-button').click(function (event) {
    // $(this) gives you the specific button clicked
    // You go from here with the specific handler
    // Example:
    $(this).next('div').toggle();
});

示例HTML：

<input type="button" id="click" class="toggle-button" value="Click">
<div id="show_hide">Text goes here...</div>

<input type="button" id="click1" class="toggle-button" value="Click">
<div id="show_hide1">Text goes here...</div>

Answer 2

以下是使用最短代码量执行此操作的演示 - http://jsfiddle.net/p8aWY/

$('input[type="button"]').click(function() {
    $(this).next('.show_hide').toggle();
});

这是HTML，使用类而不是ID -

<input type="button" value="Click">
<div class="show_hide">Text goes here...</div>
<input type="button" value="Click">
<div class="show_hide">Text goes here...</div>
<input type="button" value="Click">
<div class="show_hide">Text goes here...</div>

Answer 3

两个先前答案的合并是正确的

使用Javascript：

//Listen to click on all inputs with type=button
$('input[type="button"]').click(function() {
    //Goto the next div and toggle it's visibility
    $(this).next('div').toggle();
});

使用独特的脚本进行多次切换

3 个答案: