•  16-09-2019
  •  | 
  •  

質問

これを短くしてみます。ユーザーが展開ボタンをクリックしたときに非表示または表示されるテキストのボックスを作成しようとしています。toggle() メソッドを使用しています。

マークアップは次のようになります。

<span id="toggle0">+</span>
<div id="toggle0Container">
    blablabla...
<div>

<span id="toggle1">+</span>
<div id="toggle1Container">
    blablabla...
<div>

<span id="toggle2">+</span>
<div id="toggle2Container">
    blablabla...
<div>

// etc

#toggle0 は #toggle0Container を切り替え、#toggle1 は #toggle1Container を切り替えます。これはすべて PHP によって生成されるため、これらのコンテナーはいくつでも存在できます。

JQuery コードは次のとおりです。

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function() {
        $('#toggle' + this + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function() {
        $('#toggle' + this).click(function() {
            // this line is not working
            $('#toggle' + this + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

トグル部分を除いて機能します（機能しない行の上にコメントを追加しました）。どこに問題があるのでしょうか？

役に立ちましたか？

解決

）

私はmgrovesのアプローチに従うでしょうが、あなたが本当に配列のことをしたい、または単にそれぞれを（使用する方法を見つけ出すしたい場合は、適切に、ここにあなたがそれを使用する必要があります方法は次のとおりです。

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item).click(function() {
            // this line is not working
            $('#toggle' + item + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

他のヒント

これは、「これは」別のスコープに今あるためだ、と実際の#toggleN DOM要素ではなく、配列内のいずれかの番号を参照されます。

私はあなたが数字の配列を捨て示唆し、異なるセレクタを使用することになり、何かます：


$("div[id^=toggle][id$=container]").hide();

$("span[id^=toggle]").click(function() {
     $(this).find("span[id^=toggle][id$=container]").slideToggle("slow");
     // .. do your other html stuff
}

ただ、それらのeachsを捨て、それらをトグルセレクタを置き換えます。

編集

私は特定のユースケースには mgroves ソリューションの方が適していますが、インデックスと要素を .each メソッドのパラメーターとして受け入れる方法を説明する私の答えはそのままにしておきます。

元の答え

他の人も言っているように、コンテキストは、 これ それはあなたが参照している時点で考えているものではありません。これはレミー・シャープによる「」というタイトルの素晴らしい記事です。jQueryはこれです：謎を解いた」を読むことをお勧めします。

.each 関数は 2 つのパラメータを受け入れることができるので、非常に役立ちます。数値の配列は必要ありません。

$('span[id^=toggle']').each(function(idx, elem) {

    // idx is the current index of the jQuery object
    $('#toggle' + idx).click(function() {

        // elem is the current element
        $(elem).next('#toggle' + idx + 'Container').slideToggle('slow');

        if ($(elem).html() == '+') {
            $(elem).html('-');
        } else {
            $(elem).html('+');
        }

    });

});

私はあなたのJavaScriptを簡素化するために、「トグラー」と「コンテナ」のようなあなたのトグルコンテナか何かのようなあなたのトグルボタン（スパン）にクラスを置くことをお勧めします：

$(function() {
    // hide all containers first
    $(".container").hide();
    // now the toggle buttons
    $(".toggler").click(function() {
          var container = $("#" + $(this).attr("id") + "Container");
          container.slideToggle("slow");

          $(this).html(container.is(":visible") ? "-" : "+");
    });
});

という打撃を与えるます。

mgrovesが言ったように、あなたの範囲が取得され、

すべては、各（）を使用して、ジャッキアップ。詳細については、こののnoreferrer">

私はマックスがクラスの使用についてまったく同じものを投稿しようとしていました。私はコンテナを見つけるために、この簡単にセレクタで彼の提案を改善します。

$(function() {
  // hide all containers first
  $(".container").hide();
  // now the toggle buttons
  $(".toggler").click(function() {
    $(this).next().slideToggle("slow");

    if (container.is(":visible")) {
      $(this).html("-");
    }
    else {
      $(this).html("+");
    }
  });
});
あなたは簡単にスパン上のクラスを取得できない場合は、

、あなたはおそらくそれを含む要素から降順、タグ名によってそれらを選択するために、$（「＃SpanContainer>スパン」）のようなものを使用して、同様のセレクタを構築することができます。

あなたはあなたの要素に、その後、nextを利用する上で検索することができるクラスを与える必要があります。

このようなマークアップ何かを作ります 

<span class="toggleButton">+</span>
<div class="toggleContainer">
   blablabla...
<div>

さて、これを処理するコードは次のように簡単になります：

$('.toggleButton').click(function() {
    $(this).next('.toggleContainer').slideToggle('slow');
});

私は最近、ちょうどこのような振る舞いのためにかなり大幅なスクリプトを書きました。私は私が含むdivの中で与えられた表示/非表示要素のすべての要素をラップすることを選んだことでわずかに異なるルートを取りました。それはあなたがそれを必要とする場合は、1つのセクションに対して複数の「トリガー」を持つことができ、あなたはそれらの番号を気にすることなく、表示/非表示、任意の数の要素を追加することができます。私はそれをこのような何かを構築なります：

<div class="expSecWrapper">
    <div class="expSecTrigger">Insert Trigger Here</div>
    <div class="expSecBody">
        Content to hide/show
    </div>
</div>

そして、jQueryのコードは次のようになります。

$(document).ready(function(){
    var targets = $(".expSecWrapper")
    targets.find(".expSecTrigger").click(function(){
        targets.find(".expSecBody").hide()
        $(this).parents(".expSecWrapper").eq(0).children(".expSecBody").toggle();
    })
})

あなたはあなたのアプリケーションの残りの関連JSに追加することができます。

これは、このような表示/非表示体がラッパーの直接の子孫であることを必要としていくつかの制限を有します。ラジオボタン、どんなダウンをドロップするように適用することができます。表示/非表示場合は、複数のレベルを持つことができますので、それはまた、入れ子にすることが可能です。

最後にもう一つの事はあなたが実際にも、その動作を割り当てるために.eachイテレータを使用する必要がないことです。 .click（のようなもの）は、jQueryのオブジェクトのグループ全体に動作を割り当てます。限り、あなたはあなたのターゲットのすべてをつかむだろうセレクターを使用してます。

申し訳ありませんが、カップルが倍ことを編集する必要がありました。

所属していません StackOverflow
scroll top