JQuery无法识别滚动上的单个类别更改

我正在为我的新网站在滚动上创建较小的页眉，因此我正在缓慢地将新类应用于表头中的每个元素，并让他们通过jQuery添加/删除在滚动。它运行良好，但脚本没有改变其中的一个类，我不确定为什么。脚本如下所示：JQuery无法识别滚动上的单个类别更改

<script> 
$(function(){ 
var shrinkHeader = 200; 
    $(window).scroll(function() { 
    var scroll = getCurrentScroll(); 
     if (scroll >= shrinkHeader) { 
     $('.Header').addClass('small'); 
     $('.Logo').addClass('small'); 
     $('.HOME').addClass('small'); 
     $('.CREATORS').addClass('small'); 
     $('.VERTICALS').addClass('small'); 
     $('.XENOVA_').addClass('small'); 
     $('.ABOUT').addClass('small'); 
     $('.CONTACT').addClass('small'); 
     $('.LOG_IN').addClass('small'); 
     $('div.ICON_BG1').addClass('small'); 
     $('ul#menu li ul.sub-menu').addClass('small'); 
     $('ICON_BG_2').addClass('small'); 
    } 
    else { 
     $('.Header').removeClass('small'); 
     $('.Logo').removeClass('small'); 
     $('.HOME').removeClass('small'); 
     $('.CREATORS').removeClass('small'); 
     $('.VERTICALS').removeClass('small'); 
     $('.XENOVA_').removeClass('small'); 
     $('.ABOUT').removeClass('small'); 
     $('.CONTACT').removeClass('small'); 
     $('.LOG_IN').removeClass('small'); 
     $('div.ICON_BG1').removeClass('small'); 
     $('ul#menu li ul.sub-menu').removeClass('small'); 
     $('ICON_BG_2').removeClass('small'); 
    } 
    }); 
function getCurrentScroll() { 
    return window.pageYOffset; 
    } 
}); 
</script>

未添加的类是“ICON_BG_2”。我尝试在CSS和脚本上更改名称，而不是雪茄。下面是与它相关的类：

.Icon_BG_2 { 
    background: url("images/IconBG2.png") no-repeat; 
    position: absolute; 
    margin-left: 960px; 
    top: 26px; 
    width: 45px; 
    height: 48px; 
    z-index: 82; 
-webkit-transition: background-image .5s; 
} 
.Icon_BG_2.small { 
    background: url("images/IconBG2.png") no-repeat; 
    position: absolute; 
    margin-left: 960px; 
    top: 26px; 
    width: 35px; 
    height: 35px; 
    z-index: 82; 
    -webkit-transition: background-image .5s; 
} 
.Icon_BG_2:hover { 
    background: url("images/IconBGHover2.png") no-repeat; 
    position: absolute; 
    margin-left:960x; 
    top: 26px; 
    width: 45px; 
    height: 48px; 
    z-index: 82; 
    -webkit-transition: background-image .5s; 
}

我还通过添加功能ICON_BG_2下更多的元素测试，他们的工作，所以它不是某种最大/过载交易。

的jsfiddle可以在这里找到：http://jsfiddle.net/qTTHL/2/

来源

2014-04-11 user3517583

你忘了类前缀” .Icon_BG_2" – Core972

谢谢，这是一个错误，但它似乎仍然没有解决的问题，这是它与修复：HTTP：/ /jsfiddle.net/qTTHL/4/ – user3517583

此外，选择器区分大小写（除非您处于怪癖模式）。 http://jsfiddle.net/qTTHL/5/ – showdev

你的代码是寻找一个元素<Icon_BG_2>...</Icon_BG_2>，显然不是你的预期！

您忘记了.以指示类名。

来源

2014-04-11 21:39:28

谢谢，这是一个错误，但它似乎仍然不能解决问题，这是它的修复：http://jsfiddle.net/qTTHL/4/ – user3517583

@ user3517583检查元素和选择器中的类声明之间的情况，例如'Icon_BG_2'对'ICON_BG_2'。 – ach

你缺少的jQuery方法内你的类名的前面的点

$('ICON_BG_2').addClass('small');

应该是这个

$('.ICON_BG_2').addClass('small'); // Notice, the dot!

来源

2014-04-11 21:44:59 Ishita

你对这个问题有两个答案，他们应该合并。您可以编辑一个并删除另一个。 –

而且，在你的jsfiddle例如，

HTML有这个类 - Icon_BG_2 where javascript has this - ICON_BG_2

CSS区分大小写。

希望这会解决它

来源

2014-04-11 21:48:11 Ishita

缺少点是其他人指出的直接问题。

但是，你可以简化你的代码很多。大多数要操作的元素都有一个共同的类，nav_hover。只需添加一个普通类（nav_logo，例如）到每个标识的，和你的JavaScript是：

$(function(){ 
var shrinkHeader = 200; 
    $(window).scroll(function() { 
    var scroll = getCurrentScroll(); 
     if (scroll >= shrinkHeader) { 
      $('.nav_logo').addClass('small'); 
      $('.nav_hover').addClass('small'); 
     } 
     else { 
      $('.nav_logo').removeClass('small'); 
      $('.nav_hover').removeClass('small'); 
     } 
    }); 
function getCurrentScroll() { 
    return window.pageYOffset; 
    } 
});

而且，你的类声明的“HOME”是不正确的 - 多个类的单个类的往里走属性，由空格分隔。

工作小提琴：http://jsfiddle.net/magnafides/qTTHL/8/

来源

2014-04-11 21:52:42 ach

JQuery无法识别滚动上的单个类别更改

回答

相关问题