Зацикливание массива вместе с функцией jquery hover

Question

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

я получил массив под названием 'Триггеры' с этими переменными:

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

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

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

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

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

Answer 1

первый, не называйте их с #, так как вы используете, что в реальной ид. (вы можете добавить # в, когда вам нужно искать их с JQuery)

После этого шага код, который нужно

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

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

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

Вам также не хватало знака = в точке, где вы назначили id на divs.

демо наhttp://jsfiddle.net/gaby/WJWe3/14/

Answer 2

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

Answer 3

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

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

Answer 4

При установке 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/>"); 
}); 

Answer 5

вот как я бы это сделать 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); 
    } 
);