Question

我创建了一个扩展的div，它在使用javascript和jQuery单击时隐藏加载和扩展。我的问题是我需要在每个页面上多次使用此功能（10-30x）。有没有办法使用数组或类似的东西（我是新手，我的道歉）调用函数使用多个Div ID，例如，我的一些div id将是eb1，eb2，eb3，eb4。这是我的脚本，目前适用于一个id：

   <script type="text/javascript">
        jQuery(document).ready(function() {


        jQuery('#eb1').hide();
        //hides box at the begining
        jQuery("#hide").click(function() {
            jQuery('#eb1').fadeOut(300);
            //jQuery('#the_box').hide();
        });
        jQuery("#show").click(function() {
            jQuery('#eb1').fadeIn(300);
            //jQuery('#the_box').show();
        });

    });
</script>

任何帮助都会受到赞赏，甚至是解释的链接。谢谢，特拉维斯

Answer 1

除了John Conde's answer之外，还可以使用attribute-starts-with：

jQuery('div[id^="eb"]').hide();

JS Fiddle demo

当然，使用特定的类名更容易，然后选择器变为：

jQuery('.className').hide();

JS Fiddle demo

参考文献：

Attribute-starts-with ([attribute^="value"]) selector。

Answer 2

你应该可以通过用逗号分隔id来实现这个目的：

jQuery('#eb1','#eb2','#eb3').hide();

Answer 3

只需在google中输入“jquery multiple div show hide”：

第一个链接给出了： Show/Hide Multiple Divs with Jquery

：）

Answer 4

将css类添加到所有div（或者你使用的任何标签）元素中可能会更加清晰，然后在选择器中使用该类？

        jQuery('div.hidable').hide();
        //hides all 'hidable' boxes
        jQuery("#hide").click(function() {
            jQuery('div.hidable').fadeOut(300);
        });
etc...

Answer 5

您可以创建一个功能来执行此操作。

让我解释一下

功能ToogleDiv（容器）{

// simple toogle
$(container).toggle();

// a toogle with some effect
$(container).toggle('slow', function() {
 // add some action    }); }

这是一个Jquery示例Toogle Jquery Example

希望这有帮助。

Answer 6

您可以使用Attribute Starts With Selector [name^="value"]

var divs = $('div[id^="eb"]');
$(divs).hide();

$('#show').click(function(){
    $(divs).show();
});

$('#hide').click(function(){
    $(divs).hide();
});

JSFiddle

上的实例

Answer 7

function show(var id){
     jQuery(id).fadeIn(300);
}

function hide(var id){
     jQuery(id).fadeOut(300);
}

然后，在你的div中：

<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>

在多个Div Id上使用javascript

7 个答案: