jQuery hover - добавить класс к текущему (активному) элементу div, а не к другим

В настоящее время я работаю над эффектом jQuery для кнопки на веб-сайте, который я разрабатываю, и столкнулся с небольшой проблемой, которую не могу понять, как исправить. Я написал короткий скрипт jQuery, чтобы добавить класс в div внутри элемента кнопки. Он добавляет класс наведения к стрелке рядом с текстом ссылки и удаляет его, когда вы наводите указатель мыши — довольно просто. Однако, если вы посмотрите на этот пример (Пример), вы заметите, что при наведении курсора на первый кнопки, все стрелки на следующих кнопках также активируются, потому что она добавляет класс css к каждому элементу на странице с этим идентификатором класса.

Нажмите здесь, чтобы просмотреть скриншот проблемы.

Как заставить скрипт добавить класс только к текущей стрелке в div, а не ко всем остальным на странице? Вот мои html, css и jQuery:

HTML

<div class="end-lft"></div>
<a href="<?php echo BASE_URL; ?>doctors/" class="btn">Visit our Doctors page</a>
<div class="end-rght-h"></div><!-- This is the element that has a hover class applied when a user hovers over a.btn above -->

CSS

.end-lft {
    background: url('images/ui/page/btn-lft.jpg') no-repeat 0 0;
    width: 4px;
    height: 33px;
    display: block;
    float: left;
    clear: left;
}

a.btn {
    background: url('images/ui/page/btn-bg.jpg') repeat-x 0 0;
    width: auto;
    height: 33px;
    padding: 6px 7px 0 7px; 
    display: block;
    float: left;
    font-size: 0.9em;       
    text-decoration: none !important;
}

.end-rght-h {
    background: url('images/ui/page/btn-arrw-h.jpg') no-repeat 0 0;
    width: 22px;
    height: 33px;
    display: block; 
    float: left;
    clear: right;
}

.end-rght-v {
    background: url('images/ui/page/btn-arrw-v.jpg') no-repeat 0 0;
    width: 22px;
    height: 33px;
    display: block; 
    float: left;
    clear: right;
}

JQuery

$(document).ready(function() {
    $(".btn").hover(function() {  
        $('.end-rght-h, .end-rght-v').addClass("hvr");    
    },     
    function() {    
        $('.end-rght-h, .end-rght-v').removeClass("hvr");     
    });
});

html jquery css hover
person Taylor T.    schedule 03.06.2011    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Используйте next(), например:

$(this)
    .next()
    .$('.end-rght-h, .end-rght-v')
    .addClass("hvr");
person AR.    schedule 03.06.2011

arrow_upward
1
arrow_downward

Вместо того, чтобы выбирать имена классов, сделайте что-то вроде следующего:

$(document).ready(function() {     
    $(".btn").hover(function() {
        $(this).find('.end-rght-h, .end-rght-v').addClass("hvr");    
    }, function() {    
        $(this).find('.end-rght-h, .end-rght-v').removeClass("hvr");     
    });
});

Вызов «найти» получит потомков «этого» (в данном контексте объекта с классом «.btn»), поэтому будет переключен только тот, который находится в текущем .btn.

person FishBasketGordo    schedule 03.06.2011

arrow_upward
0
arrow_downward

Вы используете класс в качестве селектора, поэтому, конечно, он будет применять ваш новый класс ко всему, что имеет общий класс .end-rght-h или .end-rght-v.

Если вы хотите повлиять на один элемент dom, вы можете использовать идентификатор:

$('#end1').addClass(...

или вам нужно создать более конкретный селектор:

$('.btn').hover(function() {
    $(this).next('.end-rght-h, .end-rght-v').addClass('hvr');
person csigrist    schedule 03.06.2011

arrow_upward
0
arrow_downward

Спасибо, ребята, за ваши предложения. Я очень ценю, что вы нашли время, чтобы ответить и помочь. Это поставило меня на правильный путь. Вот что я в итоге использовал:

$(document).ready(function() {     
$(".btn").hover(function(){     
$('.end-rght-h, .end-rght-v',$(this).parent()).addClass("hvr");    
},     
function(){    
$('.end-rght-h, .end-rght-v').removeClass("hvr");     
});
 });
person Taylor T.    schedule 06.06.2011