2

我创建了一个扩展 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>

任何帮助将不胜感激，甚至是解释的链接。谢谢，特拉维斯

4

7 回答 7

2

除了约翰康德的回答，这也可以使用属性开始：

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

JS 小提琴演示。

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

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

JS 小提琴演示。

参考：

于 2012-09-19T15:56:45.670 回答
1

您应该能够通过用逗号分隔 id 来做到这一点：

jQuery('#eb1','#eb2','#eb3').hide();
于 2012-09-19T15:55:57.970 回答
0

也许将一个css类添加到所有div（或您使用的任何标签）应该表现得像这样的元素，然后在选择器中使用该类？

        jQuery('div.hidable').hide();
        //hides all 'hidable' boxes
        jQuery("#hide").click(function() {
            jQuery('div.hidable').fadeOut(300);
        });
etc...
于 2012-09-19T16:03:05.387 回答
0

你可以创建一个函数来做到这一点。

让我解释

功能 ToogleDiv（容器）{

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

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

这是一个 Jquery 示例Toogle Jquery 示例

希望这可以帮助。

于 2012-09-19T16:03:14.150 回答
0

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

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

:)

于 2012-09-19T15:58:57.733 回答
0

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

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

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

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

JSFiddle上的实时示例

于 2012-09-19T16:04:23.827 回答
0 
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>
于 2012-09-19T16:04:42.103 回答