jQuery, множественное наведение, оптимизация кода - PullRequest
Новая
       1

jQuery, множественное наведение, оптимизация кода

0 голосов
/ 25 февраля 2011

Я создал код, который меняет положение фона при наведении мыши, я доволен тем, как он работает, но у меня есть около 50 возможных позиций, и этот код выглядит очень громоздкимСтроки с "mouseover" и "mouseout" практически идентичны, меняются только цифры.Можно ли упростить этот код, который бы не писал одно и то же снова и снова? 

$('.b-test a').addClass('over-1')

$('.b-test a.over-1').live("mouseover", function(){
    $(this).css("background-position", "0 -120px");
});
$('.b-test a.over-1').live("mouseout", function(){
    $(this).addClass("over-2").removeClass('over-1');
}); 
$('.b-test a.over-2 ').live("mouseover", function(){
    $(this).css("background-position", "0 -240px");
});
$('.b-test a.over-2 ').live("mouseout", function(){
    $(this).addClass("over-3").removeClass('over-2');
});
$('.b-test a.over-3 ').live("mouseover", function(){
    $(this).css("background-position", "0 -360px");
});
$('.b-test a.over-3 ').live("mouseout", function(){
    $(this).removeClass('over-3').addClass("over-4");
});
$('.b-test a.over-4 ').live("mouseover", function(){
    $(this).css("background-position", "0 0");
});
$('.b-test a.over-4 ').live("mouseout", function(){
    $(this).removeClass('over-4').addClass("over-1");
});

И еще один вопрос.Можно ли установить случайную позицию фона при наведении курсора мыши, но она должна быть кратна 120?

Большое спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 25 февраля 2011

Может быть, вы могли бы объявить объект, который содержит отношение между классом и положением y?Немного похоже на это: 

var positions={
    'over-1': -120,
    'over-2': -240,
    'over-3': -360,
    'over-4': 0
}

и затем перепишите ваш код следующим образом: 

$('.b-test a').addClass('over-1')

$('.b-test a').live("mouseover", function()
{
    var pos=positions[$(this).attr('class')];
    $(this).css("background-position", "0 "+pos+"px");
});

конечно, это предполагает, что у рассматриваемых элементов только один класс.

Редактировать

Если ваши элементы имеют или могут иметь более одного класса, вы можете выполнить итерацию по элементам-объектам, чтобы проверить, какой это, например: 

$('.b-test a').addClass('over-1')

$('.b-test a').live("mouseover", function()
{
    var firstclass='',nextclass=false, classchanged=false;
    for(className in positions)
    {
        if(firstclass=='')
        {
            firstclass=className;
        }
        if($(this).hasClass(className))
        {
            var pos=positions[className];
            $(this).css("background-position", "0 "+pos+"px");
            $(this).removeClass(className);
            nextclass=true;
        }
        else if(nextclass)
        {
            $(this).addClass(className);
            nextclass=false;
            classchanged=true;
        }
    }
    if(!classchanged)
    {
        $(this).addClass(firstclass);
    }
});
0 голосов
/ 25 февраля 2011

Я думаю, что ваша лучшая ставка - создать массив со слотом для каждой Y-позиции (поместив ноль в позицию 0, так как у вас нет объекта a.over-0), и таким образом перебрать их. (Не полностью проверено, но идея есть) 

$('.b-test a').addClass('over-1');

var items = new Array(null, '-120px', '-240px', '-360px', '0');

for (var x=1; x<items.length; x++){
    var nextItem = (x==items.length-1) ? 1 : x+1;
    $('.b-test a.over-' + x).live("mouseover", function(){
        $(this).css("background-position", '0 ' + items[x]);
    });
    $('.b-test a.over-' + x).live("mouseout", function(){
        $(this).addClass('over-' + nextItem).removeClass('over-' + x);
    }); 
}

Если вы хотите использовать случайные Y-координаты, попробуйте это ... 

$('.b-test a').addClass('over-1');

var items = new Array('-120px', '-240px', '-360px', '0');

for (var x=1; x<items.length; x++){

    //Find a random spot in the items array and use that as Y-coord
    var currentY = items[Math.floor ( Math.random ( ) * item.length + 1 ) -1];

    var nextItem = (x==items.length-1) ? 1 : x+1;
    $('.b-test a.over-' + x).live("mouseover", function(){
        $(this).css("background-position", '0 ' + currentY ); //<----- change
    });
    $('.b-test a.over-' + x).live("mouseout", function(){
        $(this).addClass('over-' + nextItem).removeClass('over-' + x);
    }); 
}
...