Цикл массива вместе с функцией наведения jquery - PullRequest
Новая
       19

Цикл массива вместе с функцией наведения jquery

1 голос
/ 12 апреля 2011

Я пытаюсь ... Боже, это трудно объяснить.

Я получил массив 'triggers' с этими переменными:

"# 1_trigger", "# 2_trigger", "# 3_trigger"

И внутри jQuery each () я создаю еще одну переменную с именем 'target', которая копирует все из 'triggers' и заменяет все _trigger на _target. Затем я добавляю «триггеры» к идентификаторам привязки и «цели» к скрытым идентификаторам div.

Что я хочу сделать, так это: при наведении на _trigger появится _target. Мне удалось заставить его работать только с одной переменной, но не с несколькими.

Как я уже сказал, довольно сложно объяснить, что я хочу сделать в тексте, так что вот демонстрация и мой прогресс: http://jsfiddle.net/WJWe3/6/

Я застрял с этим слишком много часов, пожалуйста, помогите!

Ответы [ 5 ]

1 голос
/ 12 апреля 2011

1-й, не называйте их с #, так как вы используете это в фактическом идентификаторе.( вы можете добавить #, когда вам нужно искать их с помощью jquery )

После этого шага вам понадобится код 

$("#experiment a").hover(function(){
   $( '#' + this.id.replace('_trigger', '_target') ).show();

}, function(){
   $( '#' + this.id.replace('_trigger', '_target') ).hide();
});

Это должно быть закаждый цикл, так как он автоматически находит соответствующую цель.

Вы также пропустили знак = в той точке, в которой вы присвоили id для дел.в http://jsfiddle.net/gaby/WJWe3/14/

1 голос
/ 12 апреля 2011

Что-то вроде этого может быть?
http://jsfiddle.net/WJWe3/11/

0 голосов
/ 12 апреля 2011

вот как бы я это сделал http://jsfiddle.net/WJWe3/15/

<div id="experiment">
    <p><a>test 1</a> <span class='hidden'>hidden 1</span></p>
    <p><a>test 2</a> <span class='hidden'>hidden 2</span></p>
    <p><a>test 3</a> <span class='hidden'>hidden 3</span></p>
</div>

... 

$('#experiment a').hover(
    function(){ 
        $(this).siblings('span').stop().fadeTo("normal",1); 
    },
    function(){ 
        $(this).siblings('span').stop().fadeTo("normal",0); 
    }
);
0 голосов
/ 12 апреля 2011

Когда вы устанавливаете id для элемента, он не должен начинаться с #. Только когда вы используете его как селектор в jQuery, он начинается с #.

Однако вам даже не нужно использовать идентификатор. Создайте элемент a и div как объекты, а не как строку, затем вы можете подключить событие hover непосредственно к ссылке и получить прямой доступ к div, вместо попытки найти его после добавления на страницу.

jsfiddle.net / WJWe3 / 16 / 

var triggers = ["1_trigger", "2_trigger", "3_trigger"];

jQuery.each(triggers, function(i, val) {
    var target = $('<div/>', { className: 'hidden' }).text('You found me!');
    var link = $('<a/>', { href: '#' }).text(val).hover(function(){
        target.stop().fadeTo("normal", 1.00);
    }, function(){
        target.stop().fadeTo("normal", 0.00);
    });;
    $("#experiment").append(link).append(target).append("<br/>");
});
0 голосов
/ 12 апреля 2011

Вот еще один, который работает .... Просто для удовольствия.

http://jsfiddle.net/WJWe3/18/

...