Question

我正在开发一个jQuery效果，用于我正在开发的网站上的按钮，并且遇到了一个我无法弄清楚如何解决的小问题。我编写了一个简短的jQuery脚本，将一个类添加到button元素中的div。它将悬停类添加到链接文本旁边的箭头，并在鼠标移出时将其删除 - 非常简单。但是，如果您查看此示例（Example），您会注意到当您将鼠标悬停在第一个按钮上时，以下按钮中的所有箭头也会被激活，因为它会将css类添加到带有该类标识符的页面。

Click here查看问题的屏幕截图。

如何使脚本仅将类添加到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");     
    });
});

Answer 1

使用next()，如：

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

Answer 2

不要选择类名，而是执行以下操作：

$(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中的那个才会被切换。

Answer 3

您正在使用某个类作为选择器，因此当然它会将您的新类应用于共享.end-rght-h或.end-rght-v类的所有内容。

如果您想影响单个dom元素，可以使用id：

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

或者你需要创建一个更具体的选择器：

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

Answer 4

谢谢你的建议。我非常感谢您花时间回应并提供帮助。它让我走上正轨。这是我最终使用的内容：

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

jQuery hover - 将类添加到当前（活动）div元素，而不是其他元素

4 个答案: