0

jquery を使用して、テキスト リンクから DIV を表示/非表示にしたいと考えています。

これまでにこのサイトで見つけた例と少し違うのは、1 つのページで複数回実行し、サイト全体の任意のページで使用できる一般的な方法が必要なことです。

ページに含まれる別のファイルにJSを入れることができれば本当にいいので、関数にラップすることができますか?

誰かがここで私を助けることができますか? 汎用的にするには、 id="toggle-hide-1" のような ID で表示/非表示の div を割り当て、ページの数字を変更して別の表示/非表示領域にするだけです。

関数が div を表示/非表示にする名前を使用して ID に名前を付け、ページ上で表示/非表示にする他の div と区別するために、番号を追加することができます。

以下は、リンククリックでdivの表示/非表示を行う部分的なコードですが、私が必要としているものではありません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        $(".tool_block, .view-code").toggle();
    }); 
});
</script>
<a href="#" class="view-code" >view code</a>
<a href="#" class="view-code"  style="display:none">hide code</a> <br  />

<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
4

3 に答える 3

3

最善のアプローチは、おそらくカスタム属性を使用することです。どの div を切り替えるかを jquery に伝える属性を使用してアンカーをマークアップすると、作業を行う汎用コードを簡単に記述できます。

このようなもの：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        var d = $(this).attr("toolDiv");
        $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
    }); 
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br  />

<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

次に、各アンカー div ペアに一意の toolDiv 値を指定します (数値である必要はありません)。

于 2009-09-05T20:38:52.047 に答える
1

コレクション全体を div でラップできれば、かなり簡単になります。

$(function() {
    $(".view-code").click( function(e) {
        $(this).siblings().andSelf().toggle();
    });
});

<div>
    <a href="#" class="view-code" >view code</a>
    <a href="#" class="view-code"  style="display:none">hide code</a> <br  />

    <div class="tool_block" style="display:none" >
    this stuff is hidden until we choose to show it!
    </div>
</div>

を処理しない場合は<br />、兄弟をフィルタリングして、div 要素とアンカー要素のみにすることができます。

于 2009-09-05T20:38:07.323 に答える
0

代わりに特定のクラスを使用しないのはなぜですか? 表示/非表示にする各要素は、次のように「トグル」と呼ばれるクラスを持つことができます。

<div class="toggler">
 ...
</div>

次に、このクラスですべての要素の可視性を一度に切り替えることができます。

$(".toggler").toggle();

このシナリオでは、これらの要素がドキュメント内のどこに存在するか、またはそれらがどのような種類の要素であっても違いはありません。

この機能をグローバルに利用できるようにする必要がある場合は、次のようにカスタム関数を使用して jQuery 自体をいつでも拡張できます。

$.toggleTogglers = function(toggleClass) {
  $("." + toggleClass).toggle();
};

これは、独自のデザインのトグル カスタム クラスを柔軟に選択できるという点で優れています。

于 2009-09-05T20:52:24.173 に答える