当 div 具有特定类时更改元素 css答案

【问题标题】：Change element css when div has specific class当 div 具有特定类时更改元素 css
【发布时间】：2017-09-18 03:30:39
【问题描述】：

我的代码有问题。我想要做的是在第一个 div 上更改元素的 css。所以，当我在第一个 div 上时，我的元素有例如 font-size: 24px;当我向下滚动时，我的元素应该有 font-size: 40;我正在使用 wordpress 和 Vase 主题。我的网站 - http:///www.ciranga.pl

当我在主幻灯片（红色背景）上时，我想让右边的箭头变成白色。当我向下滚动时，我希望它是红色的。我怎样才能做到这一点？任何帮助都会很棒。

jQuery(document).ready(function($) {
if ($('.swiper-slide:first-of-type').hasClass('swiper-slide-active')) {
    $('.vase_whiteC').css('font-size', '40px');
} else {
    $('.vase_whiteC').css('font-size', '24px');
}
$('html').keydown(function(e) {

    var Key = e.keyCode;

    if ([37, 38, 39, 40].indexOf(Key) > -1) {

        // up!
        if (Key == 38) {
            $(".umicon-vase_arrowPrev").parent().trigger("click");
        }

        // down!
        if (Key == 40) {
            $(".umicon-vase_arrowNext").parent().trigger("click");
        }

        return false;
    }

});

});

【问题讨论】：

我看到您的代码允许页面页脚处的红色箭头在页面滚动时可见和隐藏。您可以使用相同的方法根据您的要求添加具有不同宽度和颜色的类。然后，您可以向必须更改外观的元素添加和删除此类。你也有c类vase_whiteC和color: #fff !important。您需要删除它并在滚动位置切换红色和白色类。

标签： javascript jquery css wordpress

【解决方案1】：

在与原始海报合作后，我们得出了这个解决方案：

$(window).on('wheel', function() { setButtonState(); });
arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]').click(function() { setButtonState(); });

function setButtonState() {
    setTimeout(function() {
        var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length;
        if(!sbw) {
            arw.css('color', 'red');
        } else {
            arw.css('color', 'white');
        }
    }, 600);
}

【讨论】：

添加 this link 作为评论以供将来参考。滑块 API 有回调方法，如果有人不知道它是如何工作的（我个人不知道），可以使用这些方法。

【解决方案2】：

您可以使用其他方法，例如$(document).scroll(function(){

以下代码不是您的答案，但您可以尝试类似的方法

变量

 $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) { 
            // add css here
     }
  }

targetOffset 将是 38,40。

【讨论】：

滚动事件仅在页面加载后触发一次，因此很遗憾，此解决方案不起作用。