Добавление эффекта наведения jQuery в цикле for не работает - PullRequest
Новая
       14

Добавление эффекта наведения jQuery в цикле for не работает

0 голосов
/ 27 июня 2011

Как видно из заголовка, я пытаюсь добавить эффект наведения jquery к различным a-тегам внутри цикла for.Добавлены эффекты при наведении, но функционал скрытия-шоу внутри кажется неправильным.я всегда получаю селектор для последнего 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();
    });
}

Ответы [ 3 ]

1 голос
/ 27 июня 2011

Пожалуйста, просмотрите эту скрипку: 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(), она применяет ее ко всей коллекции.Если вы пишете цикл for для итерации по коллекции jQuery, вы делаете это неправильно.
  2. Как правило, вы захотите использовать технику, которая связывает ваш якорный тег с целью, с которой он работает.Обычно это делается с помощью атрибута href, когда href не является внешней страницей, а вместо этого внутренней ссылкой (которая использует знак #).Вы увидите, что я использовал его как ссылку на связанный идентификатор LI.
1 голос
/ 27 июня 2011

Вы можете упростить это до: 

/* 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/

0 голосов
/ 27 июня 2011

Проблема в том, что переменные e и k являются глобальными.Один из вариантов - заключить этот код в функцию.Таким образом, e и k являются локальными для этой функции.Вот так:

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

...