Ориентация на несколько элементов с помощью jQuery

Question

Я искал, но потерпел неудачу, и мне интересно, могу ли я использовать один оператор jQuery для таргетинга нескольких элементов на странице. У меня есть несколько идентичных кнопок на странице, и каждая из них состоит из левого, среднего и правого фона, где середина содержит текст и может расширяться до любого необходимого размера. Каждый из них имеет уникальный идентификатор и / или класс. Теперь я настроил его так, чтобы при наведении указателя мыши на их контейнер div 3 фона менялись, создавая впечатление, что кнопки находятся в другом состоянии. Теперь это делается с помощью 1 вызова при наведении курсора на каждую кнопку, которая находится в классе (лучше использовать идентификатор, но вы не можете иметь несколько элементов с одинаковым идентификатором). За этим парением следуют 8 событий. Изменение фона для каждого правого левого и среднего и изменение цвета для текста середины.

Это означает много строк кода. Я хочу, чтобы у меня была возможность вызывать все кнопки одновременно с событием hover или чтобы событие hover каким-то образом узнало, какая кнопка находится над кнопкой мыши, и выбросить этот класс или идентификатор или даже имя обратно в jQuery, который затем может изменить Кнопки подклассов для правого левого и среднего. Подкласс для правого левого и среднего одинаков на всех кнопках, поэтому, если событие наведения может быть сфокусировано на каком-либо событии, называемом им, мне понадобится только один набор вызовов для изменения атрибутов фона ... Текущий код ниже для двух кнопок ...

$j(".learnMoreButton").hover(
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css("color", "#666");
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

$j(".bioButton").hover(
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.bioButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.bioButton .buttonMiddle a').css("color", "#666");
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

Answer 1

Вы можете сделать:

$(".learnMoreButton, .bioButton").hover(function() {
  $(this).find(".buttonRight")...
  ...
}, function() {
  ...
});

Я добавлю, что я думаю, что вам будет лучше делать это с классами CSS.

.buttonLeft { background: url(/images/concaveBtn-Left.gif) }
.buttonMiddle { background-image: url(/images/concaveBtn-Middle.gif) }
.buttonMiddle a { color: #666; }
.buttonRight { url(/images/concaveBtn-Right.gif) }
.hoverover .buttonLeft { url(/images/concaveBtn-Left2.gif) }
.hoverover .buttonMiddle { url(/images/concaveBtn-Middle2.gif) }
.hoverover .buttonMiddle a { color: #FFF; }
.hoverover .buttonRight { background: url(/images/concaveBtn-Right2.gif) }

и

$(".learnMoreButton, .bioButton").hover(function() {
  $(this).addClass("hoverover");
}, function() {
  $(this).removeClass("hoverover");
});

и у вас будет намного меньше кода.

Также вы можете задать элементам несколько классов так:

<div class="bioButton hoverbutton">
  ...
</div>
<div class="learnMoreButton hoverbutton">
  ...
</div>

и тогда становится еще проще:

$(".hoverbutton").hover(function() {
  $(this).addClass("hoverover");
}, function() {
  $(this).removeClass("hoverover");
});

Answer 2

Хорошо, я получил это работает! Спасибо Cletus, что вы отправили меня в правильном направлении ... Мне пришлось использовать селектор детей для этого, затем выбрать каждого ребенка и изменить его индивидуальные классы ... Вот код ...

$j(function (){  
$j(".hoverBTN").hover( 
function() { 
    $j(this).children('div:nth-child(1)').addClass("hoveroverL");
    $j(this).children('div:nth-child(2)').addClass("hoveroverM");
    $j(this).children('div:nth-child(3)').addClass("hoveroverR");
}, function() {
    $j(this).children('div:nth-child(1)').removeClass("hoveroverL");
    $j(this).children('div:nth-child(2)').removeClass("hoveroverM");
    $j(this).children('div:nth-child(3)').removeClass("hoveroverR");
});

});

Отлично работает таким образом. Я хотел что-то компактное и легко повторно используемое, и я думаю, что это покрывает оба. Еще раз спасибо всем ...

Answer 3

Вы также можете рассмотреть возможность вообще не использовать jQuery или Javascript для этого. CSS должно быть достаточно. Просто присвойте каждой кнопке один и тот же класс и сделайте что-то подобное в своем CSS:

.button .buttonLeft
{
    background: url(/images/concaveBtn-Left.gif)
}

.button .buttonMiddle
{
    background: url(/images/concaveBtn-Middle.gif);
    color: #666;
}

.button .buttonRight
{
    background: url(/images/concaveBtn-Right.gif)
}

.button:hover .buttonLeft
{
    background: url(/images/concaveBtn-Left2.gif)
}

.button:hover .buttonMiddle
{
    background: url(/images/concaveBtn-Middle2.gif);
    color: #ffffff;
}

.button:hover .buttonRight
{
    background: url(/images/concaveBtn-Right2.gif)
}

Однако есть одна оговорка; IE (хотя бы некоторые версии?) Не поддерживает: hover on divs. Чтобы обойти эту проблему, нужно сделать кнопку <a> и поместить элементы, которые будут стилизованы внутри кнопки, как <span> s.

Answer 4

В настоящее время код выглядит так:

$j(function (){  
    $j(".hoverBTN").hover( 
    function() {
        $j(this).addClass("hoveroverL");
        $j(this).addClass("hoveroverM");
        $j(this).addClass("hoveroverR");
    }, function() {
        $j(this).removeClass("hoveroverL");
        $j(this).removeClass("hoveroverM");
        $j(this).removeClass("hoveroverR");
    });

});   

Что работает, но на неправильных элементах. В настоящее время он меняет наведенную на кнопку кнопку, но добавляет к ней 3 класса, а не подклассы для правого левого и среднего: пример кнопки:

<div id="timelineButton" style="position:relative;" class="hoverBTN" >
    <div class="buttonLeft"></div>
    <div class="buttonMiddle">Timeline</div>
    <div class="buttonRight"></div>
</div>

Answer 5

$j(".learnMoreButton, .bioButton").hover(
    function () {
        var $this = $j(this); //this points to DOM element hovered, $j() makes jQuery object out of it.
        //this syntax tells jQuery to search only inside $this element.
        $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.buttonMiddle a', $this).css({color:"#ffffff"});
        $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        var $this = $j(this);
        $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.buttonMiddle a', $this).css("color", "#666");
        $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right.gif)"});
    }
);