0

タイトルが示すように、for ループ内のさまざまな a タグに jquery ホバー効果を追加しようとしています。ホバー効果が追加されましたが、内部の非表示表示機能が間違っているようです。私は常に最後のli要素のセレクターを取得します。

どんな助けでも素晴らしいでしょう。

http://jsfiddle.net/pGgeW/1/

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

html:

<a id="o1" href="#">Show Text 1</a>
<a id="o2" href="#">Show Text 2</a>
<a id="o3" href="#">Show Text 3</a>
<a id="o4" href="#">Show Text 4</a>
<a id="o5" href="#">Show Text 5</a>

<ul class="subTxt">
    <li id="u1">Text 1</li>
    <li id="u2">Text 2</li>
    <li id="u3">Text 3</li>
    <li id="u4">Text 4</li>
    <li id="u5">Text 5</li>
</ul>

JavaScript:

/* Hide li's */
$("ul.subTxt").find("li").each(

function() {
    $(this).hide();
});

/* Add Hover-Events */
for (var a = 1; a < 6; a++) {
    var k = '#o' + a;
    var e = '#u' + a;
    $(k).hover(

    function() {
        $(e).show();
        $(this).append('<div id="hk" style="position: relative;float: right;">' + k + ' ' + e + '</div>');
    }, function() {
        $(e).hide();
        $(this).find('#hk').remove();
    });
}
4

3 に答える 3

1

このフィドルを確認してください: http://jsfiddle.net/pGgeW/9/

$("ul.subTxt").find("li").hide();

$("a").hover(function(e) {
    $($(this).attr('href')).toggle();
}).click(function() { return false; });

HTML:

<a href="#u1">Show Text 1</a>
<a href="#u2">Show Text 2</a>
<a href="#u3">Show Text 3</a>
<a href="#u4">Show Text 4</a>
<a href="#u5">Show Text 5</a>

<ul class="subTxt">
    <li id="u1">Text 1</li>
    <li id="u2">Text 2</li>
    <li id="u3">Text 3</li>
    <li id="u4">Text 4</li>
    <li id="u5">Text 5</li>
</ul>

カップルのメモ:

  1. jQuery にはループが組み込まれています。 のような操作を適用.hide()すると、コレクション全体に適用されます。jQuery コレクションを反復処理するループを作成する場合for、それは間違っています。
  2. 一般に、アンカー タグを作用対象のターゲットに関連付ける手法を使用する必要があります。通常、これは、href が外部ページではなく内部参照 (# 記号を使用) である場合に、href 属性で行われます。関連する LI ID への参照として使用したことがわかります。
于 2011-06-27T13:31:33.143 に答える
1

これを次のように単純化できます。

/* Hide li's */
$("ul.subTxt li").hide();

$("a.hover").hover(function(){
    var n = this.id.replace("o","");
    $("#u"+n).show();
}, function() {
    var n = this.id.replace("o","");
    $("#u"+n).hide();
});

http://jsfiddle.net/petersendidit/pGgeW/3/

于 2011-06-27T13:29:26.303 に答える
0

問題は、変数eとk変数がグローバルであることです。1 つのオプションは、そのコードを関数でラップすることです。このようeに、kその関数に対してローカルです。そのようです：

http://jsfiddle.net/pGgeW/8/

于 2011-06-27T13:39:15.330 に答える