0

div を表示/非表示に切り替える JavaScript 関数があります。単一の div を切り替えるリンクが 1 つあれば機能します。しかし、これらのリンクと div を行ごとに 1 つずつ作成する while ループがあります。ただし、最初のリンクのみが機能します。トグル リンクと div の両方の ID の末尾に $ を追加できます。この変数を探すように JavaScript に指示するにはどうすればよいですか?

JavaScript:

$(function(){
    var id = document.getElementById();
    $('#toggleDiv').click(function(){
        $('#targetDiv').toggle();
    });
});

PHP:

echo "<a href=\"javascript:void(0);\" id=\"toggleDiv$ctr\">;
echo "<div id=\"targetDiv$ctr\" style=\"display:none;\">";

ご覧のとおり、$ctr は各リンクと div を個別化するのに役立ちますが、どの #toggleDiv がクリックされているかを識別し、正しい #targetDiv を切り替えることができるようにする Java が必要です。

何か助けはありますか？

4

3 に答える 3

1

'html および jQuery セレクターを正しく構成すれば、これらすべての要素に独自の ID を設定する必要はありません。それらはすべてクラスを共有できます。

このようなものは、親/子の設定で機能する可能性があります:

 $(".question").click(function() {
    $(this).parent().children(".answer").toggle();
  });

PHP

echo '<div class="some-parent">';
echo '<a href="javascript:void(0);" class="question">question</a>';
echo '<div class="answer" style="display:none;">';
echo 'answer';
echo '</div>';

ここにフィドルがあります：http://jsfiddle.net/VPCcZ/1/

または、「次の」状況では次のようになります。

jQuery('.question').click(function(){
    if ($(this).next().css("display") == "none") {
      $(this).next().attr('style', 'display: block !important');
    } else {
      $(this).next().attr('style', 'display: none !important');
    }
  });

PHP

echo '<a href="javascript:void(0);" class="question">';
echo '<div class="answer" style="display:none;">';
于 2012-12-26T21:51:44.943 に答える
0

素朴で非効率的ですが、使用可能なアプローチは次のようなものです。

var i = 0;
while ($('#toggleDiv' + i).length) {
    (function () {
        // Copy the iteration variable, otherwise all of the links will toggle
        // the *last* targetDiv instance!
        var copy = i;

        $('#toggleDiv' + copy).click(function () {
            $('#targetDiv' + copy).toggle();
        });
    })();

    ++i;
}

より良い方法は、すべてのトグル リンク div に同じ CSS クラスのタグを付けてから、同じクリック ハンドラーをそれらすべてに適用することです ( $('.toggle-link').click(...))。このハンドラーは、ターゲット要素の ID を調べて番号を抽出し、一致するtargetDivインスタンスを見つけて切り替えます。この方法では、イベント ハンドラーを 1 つだけ登録します。

コードで示したアプローチでは、トグル div ごとに 1 つのイベント ハンドラーがあり、そのようなリンクが何千もある場合、ブラウザーでメモリの問題が発生する可能性があります。リンクの数が少ない場合はおそらく問題ありませんが、リンクが多くなる可能性がある場合は、別のアプローチを検討してください。

于 2012-12-26T21:46:03.963 に答える
0

id 属性が で始まるすべてのリンクにクリック イベント リスナーを追加しますtoggleDiv。イベント ハンドル関数で、 の後に部分文字列を抽出しtoggleDiv、ID を持つ div を探してtargetDiv<extracted_number>切り替えます。

$('a[id^=toggleDiv]').click(function() {
    var id = $(this).attr('id');
    var number = id.substring('toggleDiv'.length);
    $('#targetDiv' + number).toggle();
});
于 2012-12-26T21:46:10.797 に答える