Question

我有这个jQuery代码，用于在滚动并向标题添加类.scrolled后将img src属性从浅色版本更改为深色版本：

 $j(window).scroll(function () {
     if ($j(document).scrollTop() > 100) {
         $j(".header").addClass("scrolled");
         $j(".header .logo img").attr("src", "http://[...]/logo_dark.svg");
     } else {
         $j(".header").removeClass("scrolled");
         $j(".header .logo img").attr("src", "http://[...]/logo_bright.svg");
     }
 });

通过css我在标题中添加了白色背景，如果.scrolled类存在或是否悬停：

 .header:hover, .header.scrolled {
     background: #fff
 }

最后我还需要用深色版本替换徽标，如果标题悬停但.scrolled类不存在，否则我最终会在白色背景上使用浅色徽标。这是我正在尝试的jQuery，但如果.scrolled类存在，它也将触发：

 $j(".header").not("[scrolled]").hover(function(){
     $j(".header .logo img").attr("src", "http://[...]/logo_dark.svg");
 }, function(){
     $j(".header .logo img").attr("src", "http://[...]/logo_bright.svg");
 });

如果.scrolled尚未添加到标题中，我如何确保仅触发此最后一个jQuery？

Answer 1

您可以使用jQuery的 .hasClass（）来首先检查您的标头是否具有滚动类，如果是，则仅更改徽标图像src。

编辑回复评论：

不用担心，只需确保在悬停功能周围进行.hasClass（）检查。像这样：

if (!$j(".header").hasClass("scrolled")) {
    $j(".header").hover(function(){
        $j(".header .logo img").attr("src", "http://[...]/logo_dark.svg"); 
    }, function(){
         $j(".header .logo img").attr("src", "http://[...]/logo_bright.svg"); 
    }); 
}

我是stackoverflow的新手，如果这里的格式很糟糕，那么很多道歉。

Answer 2

将您的选择器从$j(".header").not("[scrolled]")更改为 $j('.header:not(.scrolled)')

$j('.header:not(.scrolled)').hover(function(){
     $j(".header .logo img").attr("src", "http://[...]/logo_dark.svg");
 }, function(){
     $j(".header .logo img").attr("src", "http://[...]/logo_bright.svg");
 });

通过jQuery添加在类上运行jQuery

2 个答案: