0

HTML：

<a id="link1" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>

<a id="link2" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>

<a id="link3" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>

JS：

for (var i = 0; i <= 500; i++) {
  $('#link' + i).click(function() {
    $('#text' + i).toggle('fast');
    return false;
  });
}

しかし、それは機能していません。アイデアは、適切な#text（number）ブロックを表示する各#link（number）を作成することです。しかし、この瞬間、私のphpstormは「i」は可変変数だと言っています。

4

3 に答える 3

4

ここでクロージャの問題がi発生します。これは、イベントハンドラにデータとして渡されるのを避けるためです。

for (var i = 0; i <= 500; i++) {
  $('#link' + i).click(i, function(e) {
    $('#text' + e.data).toggle('fast');
    return false;
  });
}
于 2013-03-18T17:05:01.837 に答える
1

私はあなたが次のことをすることができると思います：

すべてにクラス「targetLink」を追加します：

<a id="link1" class="targetLink" href="#">LINK1</a>

クラス自体を対象とするforループを置き換えます。

$("a.targetLink").toggle(function() {
    $(this).next("div").slideDown(350);
}, function() {
    $(this).next("div").slideUp(350);
});

フィドル： http： //jsfiddle.net/VinnyFonseca/yxpCA/

編集：別のアイテムをクリックしたときに以前に開いたdivを閉じるための追加機能。

$("a.targetLink").toggle(function() {
    $(".open").slideUp(350);
    $(this).next("div").slideDown(350).addClass("open");
}, function() {
    $(this).next("div").slideUp(350).removeClass("open");
});
于 2013-03-18T17:09:22.633 に答える
0

まず、href属性属性を編集して、対応するDom要素といくつかのクラスを参照してアンカーを識別します。

<a id="link1" href="#text1" class="some-class">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>

<a id="link2" href="#tex2" class="some-class">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>

<a id="link3" href="#tex2" class="some-class">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>

次に、JavaScriptを変更します

$('.some-class').click(function() {
    $( $(this).attr('href') ).toggle('fast');
});
于 2013-03-18T17:11:30.843 に答える