Как использовать динамический идентификатор Div

Question

Я смотрел здесь так много ответов, которые настолько близки, но поскольку мои знания jQuery настолько неоднородны, я не могу сделать их релевантными. Так что я просто пойду и спрошу. Надеюсь, вы все не против!

Итак, вот сценарий:

$("#button1").mouseenter(function(){
  $("#a1").fadeIn('100', function() { });

  $("#button1").mouseleave(function(){
      $("#a1").fadeOut('100', function() {}); 
  }); 
});

У меня есть несколько кнопок, для которых на mouseenter я хочу активировать соответствующую стрелку.

Вместо того, чтобы повторять скрипт для каждой пары - от #button2 до #arrow2 и т. Д. - как я могу просто вставить некоторую аккуратную переменную в бит $() и заставить ее работать? Звучит просто, я уверен, что есть способ, который моя плотность не может найти.

Это HTML (для тех, кто его запрашивал):

 <div id="buttons">
    <p><a href="#"><img src="images/1.png" name="button1" id="button1" /></a></p>
    <p><a href="#"><img src="images/2.png" name="button2" id="button2" /></a></p>
    <p><a href="#"><img src="images/3.png" name="button3" id="button3" /></a></p>
    <p><a href="#"><img src="images/4.png" name="button4" id="button4" /></a></p>
    <p><a href="#"><img src="images/5.png" name="button5" id="button5" /></a></p>
    </div>

<div class="arrow" id="a1"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a2"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a3"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a4"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a5"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a6"><img src="images/arrow.png" width="747" height="75" /></div>

Answer 1

Ваше решение не масштабируется.

Вы назначаете обработчики событий для каждого элемента в dom.

Это одна из проблем, которые у меня есть с jQuery. Это очень легко сделать неправильно и выстрелить себе в ногу по пути.

Что вам нужно, это делегирование событий.

По сути, концепция заключается в том, что у вас есть обработчик событий намного выше в дереве доменов, который слушает события, которые всплывают. Таким образом, вы можете обрабатывать события мыши в списке, но не в самих элементах списка, а в документе, в одном обработчике событий.

Взгляните на http://api.jquery.com/on/

Ваш код должен выглядеть примерно так:

$('body').on('mouseenter', '#buttons img', function (e) {
    $('#a' + $(this).attr('id').slice(-1)).fadeIn(300);
});

$('body').on('mouseleave', '#buttons img', function (e) {
    $('#a' + $(this).attr('id').slice(-1)).fadeOut(300);
});

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

Рабочий пример можно найти здесь: http://jsfiddle.net/GNs44/1/

Answer 2

Вместо использования идентификатора присвойте кнопке класс.

HTML:

<button id="button1" class="hoverbutton" />
<button id="button2" class="hoverbutton" />

JQuery:

$(".hoverbutton").mouseenter(function () {
        $(".arrowclass").fadeIn('100', function () { });
    });

$(".hoverbutton").mouseleave(function () {
        $(".arrowclass").fadeOut('100', function () { });
    });

Answer 3

$(".buttonClass").mouseenter(function(){
  $(this).siblings('.aClass').fadeIn('100', function() { });

  $(".buttonClass").mouseleave(function(){
      $(this).siblings('.aClass').fadeOut('100', function() {}); 
  }); 
});

Вы можете использовать это (или подобное, вместо братьев и сестер используйте правильный селектор) и добавить упомянутые классы (aClass и buttonClass) к вашим компонентам).

Пример, где это работает:

<div>
 <button class="buttonClass">Description</button>
 <a class="aClass">Description</a>
</div>

Обратите внимание, что важно "сгруппировать" их внутри тега div, потому что в противном случае теги ALL <a> будут появляться / исчезать при наведении курсора на кнопку.

Answer 4

Примерно так может начаться:

$("[id*=button]").mouseenter(function(){
    var t = $(this),
        idnum = t.slice(-1);

    $("[id=a" + idnum + "]").fadeIn('100', function() {
    }); 
}).mouseleave(function(){
    var t = $(this),
        idnum = t.slice(-1);

    $("[id=a" + idnum + "]").fadeOut('100', function() {
    }); 
});