2

javascript と jQuery を使用して、読み込み時に非表示になり、クリックすると展開する展開 div を作成しました。私の問題は、この機能を各ページで複数回 (10-30x) 使用する必要があることです。配列またはその性質のものを使用して複数の Div ID を操作する関数を呼び出す方法はありますか (私は初心者です。申し訳ありません)。たとえば、私の Div ID のいくつかは eb1、eb2、eb3、eb4 になります。そして、これが現在1つの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

John Conde の回答に加えて、これは attribute-starts-with を使用して可能です:

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 
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 に答える
0

セレクターで始まる属性を使用できます[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

Googleに「jquery multiple div show hide」と入力するだけです：

最初のリンクはこれを提供します： Show/Hide Multiple Divs with Jquery

:)

于 2012-09-19T15:58:57.733 に答える
0

Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?

        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

You could create a function to do that.

let me explain

function ToogleDiv(container){

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

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

here's is a Jquery example Toogle Jquery Example

Hope this helps.

于 2012-09-19T16:03:14.150 に答える