СУХОЕ программирование с помощью jquery

Question

Размещение как JQuery новичок. Я уверен, что должен быть способ сжать приведенный ниже код в СУХОЙ манере. По сути, это просто отображение / скрытие, которое применяется к нескольким элементам на странице, причем все они используют один и тот же шаблон и соглашения об именах:

$("#homelink1").hover(
    function() { $("#poptext1").show(); },
    function() { $("#poptext1").hide(); }
);

$("#homelink2").hover(
    function() { $("#poptext2").show(); },
    function() { $("#poptext2").hide(); }
);
...

Я застрял в том, как преобразовать это в функцию с переданными параметрами, чтобы я мог просто передать целое число (1 или 2) и сделать так, чтобы функция оценивала остальное, например

$("#homelink" + param).hover

Answer 1

Как насчет этого:

function setHover( param ){
   $("#homelink" + param).hover(
    function() { $("#poptext" + param).show(); },
    function() { $("#poptext" + param).hide(); }
  );
}

Answer 2

Являются ли элементы #poptext дочерними по отношению к их #homelink? Если это так, вы можете создать класс "homelink" и класс "poptext", а затем сделать что-то вроде следующего:

$(".homelink .poptext").hover(
    function() { $(this).show(); },
    function() { $(this).hide(); }
});

В качестве примечания, большинство функций в jQuery работают так же хорошо с коллекциями объектов, как и с одним. В этом случае, хотя $(". Homelink .poptext") возвращает коллекцию объектов, каждый из них по отдельности ассоциируется с обработчиком mouseover и mouseout с помощью hover().

Answer 3

Вы можете использовать регулярное выражение, чтобы получить число из homelink что зависло, затем переключите связанный poptext,

Попробуйте это: http://jsfiddle.net/xFR3s/

$("#homelink1,#homelink2").hover( function() { 
    $("#poptext" + this.id.match(/\d+$/)[0]).toggle(); 
});​

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

Попробуйте это: http://jsfiddle.net/xFR3s/1/

$("[id^=homelink]").hover( function() { 
    $("#poptext" + this.id.match(/\d+$/)[0]).toggle(); 
});​

---

РЕДАКТИРОВАТЬ: Если вы не хотите, чтобы это интерпретировалось на лету, я думаю, я бы сделал что-то вроде этого:

Попробуйте это: http://jsfiddle.net/xFR3s/2/

$("[id^=homelink]").each(function() {
    var num = this.id.match(/\d+$/)[0];
    $(this).hover( function() { 
        $("#poptext" + num).toggle(); 
    });​
});

или это:

Попробуйте это: http://jsfiddle.net/xFR3s/3/

$("[id^=homelink]").each( function() {
    $(this).hover( setUpHover(this.id.match(/\d+$/)[0]) );
});

function setUpHover(num) {
    return function() {
        $("#poptext" + num).toggle(); 
    };
}​

Answer 4

Я, вероятно, попробую что-то вроде следующего:

$('.homelink').bind('hover', function(){
    $('.poptext', this).toggleClass('hide');
});

# and some CSS

.hide {
    display: none
}

Свяжите событие hover с общим именем класса, а не пытайтесь выяснить, как хакерски связать его с #homelink{somenumber} и #poptext{somenumber}. Держите свои идентификаторы на месте, если необходимо (например, для оформления хуков), но упростите вещи и используйте классы.

Answer 5

Почему бы вам не создать элемент с классом, чтобы вы могли сделать это так:

jQuery('.homelink').each(function() {
    var me = jQuery(this);
    var target = me.find('.poptext'); //if the target is 'poptext' class
    me.hover(
        function() {
           target.show();
        },
        function() {
            target.hide();
        }
    );
});