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

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

1 голос
/ 03 июня 2011

В настоящее время я работаю над эффектом jQuery для кнопки на разрабатываемом веб-сайте и столкнулся с небольшой проблемой, которую не могу понять, как ее исправить. Я написал короткий скрипт jQuery для добавления класса в div внутри элемента button. Он добавляет класс наведения к стрелке рядом с текстом для ссылки и удаляет его при наведении мыши - довольно просто. Однако, если вы посмотрите на этот пример ( Пример ), вы заметите, что при наведении курсора на первую кнопку все стрелки в следующих кнопках также активируются, поскольку он добавляет класс 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");     
    });
});

Ответы [ 4 ]

2 голосов
/ 03 июня 2011

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

$(this)
    .next()
    .$('.end-rght-h, .end-rght-v')
    .addClass("hvr");
1 голос
/ 03 июня 2011

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

$(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");     
    });
});

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

0 голосов
/ 06 июня 2011

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

$(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");     
});
 });
0 голосов
/ 03 июня 2011

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

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

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

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

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