Question

我的导航栏中有一对肮脏，破解的jQuery函数，我需要帮助清理。

基本上，我有一个简单的工具栏，在用户滚动到页面上的某个点后会改变颜色（因为页面背景为白色，菜单项变为黑色，条形背景从透明变为白色）。

但是，当点击菜单中的叠加切换时，客户端希望叠加层为黑色，并且项目变为白色。我用一个讨厌的方法实现了这一点，但我的jQuery技能仍然非常不成熟......

滚动到某个点后更改颜色：

var scroll_start = 0;
var startchange = $('.nav-null');
var Heightofit = startchange.outerHeight()-100;
$(window).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > Heightofit) {
        $('nav.global_nav').css('background-color', 'rgba(255,255,255,1)');
        $('nav.global_nav i').css('color', 'rgba(0,0,0,0.9)');
        $('.logo svg g').css('fill', 'rgba(0,0,0,0.9)');
        $('#trigger-overlay span').css('background-color', 'rgba(0,0,0,0.9)');
    } else {
        $('nav.global_nav').css('background-color', 'transparent');
        $('nav.global_nav i').css('color', 'rgba(255,255,255,1)');
        $('.logo svg g').css('fill', 'rgba(255,255,255,1)');
        $('#trigger-overlay span').css('background-color', 'rgba(255,255,255,1)');
    }
});

点击切换时翻转颜色：

$('#hamburger').toggle(function () {
    $("#hamburger span, nav, nav.global_nav i").addClass("flip");
    $('.logo svg g').css('fill', 'rgba(255,255,255,1)');
}, function () {
    $("#hamburger span, nav, nav.global_nav i").removeClass("flip");
    $('.logo svg g').css('fill', 'rgba(0,0,0,0.9)');
    return false;
});

我很欣赏如何最好地结合和/或清理这些混乱。

Answer 1

这是我能想到的最好的。

  #...
  358) Participant validations 
       Failure/Error: it { should ensure_length_of(:coresp_country).is_at_most(255) }
       NoMethodError:
         undefined method `ensure_length_of' for #<RSpec::ExampleGroups::Participant::Validations:0x0000000f40aec0>
       # ./spec/models/participant_spec.rb:100:in `block (3 levels) in <top (required)>'

  359) Participant validations company 
       Failure/Error: it { should ensure_length_of(:company).is_at_most(255) }
       NoMethodError:
         undefined method `ensure_length_of' for #<RSpec::ExampleGroups::Participant::Validations::Company:0x0000000f414ab0>
       # ./spec/models/participant_spec.rb:149:in `block (4 levels) in <top (required)>'

  360) Participant validations company declared_type = COMPANY 
       Failure/Error: it { should validate_presence_of(:company) }
       NoMethodError:
         undefined method `validate_presence_of' for #<RSpec::ExampleGroups::Participant::Validations::Company::DeclaredTypeCOMPANY:0x0000000f429c58>
   #...

Answer 2

一切看起来都不错，但是，如果你像这样以编程方式改变CSS，我可能倾向于将你经常使用的css属性设置为常量...

const COLOUR_WHITE = 'rgba(255,255,255,1)';
const COLOUR_BLACK = 'rgba(0,0,0,0.9)';

var scroll_start = 0;
var startchange = $('.nav-null');
var Heightofit = startchange.outerHeight()-100;
$(window).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > Heightofit) {
        $('nav.global_nav').css('background-color', BG_COLOUR);
        $('nav.global_nav i').css('color', COLOUR_BLACK);
        $('.logo svg g').css('fill', COLOUR_BLACK);
        $('#trigger-overlay span').css('background-color', COLOUR_BLACK);
    } else {
        $('nav.global_nav').css('background-color', 'transparent');
        $('nav.global_nav i').css('color', COLOUR_WHITE);
        $('.logo svg g').css('fill', COLOUR_WHITE);
        $('#trigger-overlay span').css('background-color', COLOUR_WHITE);
    }
});

$('#hamburger').toggle(function () {
    $("#hamburger span, nav, nav.global_nav i").addClass("flip");
    $('.logo svg g').css('fill', COLOUR_WHITE);
}, function () {
    $("#hamburger span, nav, nav.global_nav i").removeClass("flip");
    $('.logo svg g').css('fill', COLOUR_BLACK);
    return false;
});

这样，您可以在一个地方更改“主题”

如何在导航栏功能中简化jQuery？

2 个答案: