Question

我不善于使用javascript和jquery但是尝试学习并使一些脚本工作:) 我有这个脚本工作：

jQuery(document).ready(function($) {
  var scroll_start = 0;
  var startchange = $('#homepage-header');
  var offset = startchange.offset();
  if (startchange.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if (scroll_start >= offset.top) {
        $("#nav-toggle em").css('background-color', '#ffffff');
      }
    });
  }
});
jQuery(document).ready(function($) {
  var scroll_start = 0;
  var startchange = $('#cosafacciamo');
  var offset = startchange.offset();
  if (startchange.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if (scroll_start >= offset.top) {
        $("#nav-toggle em").css('background-color', '#000000');
      }
    });
  }
});
jQuery(document).ready(function($) {
  var scroll_start = 0;
  var startchange = $('#successo');
  var offset = startchange.offset();
  if (startchange.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if (scroll_start >= offset.top) {
        $("#nav-toggle em").css('background-color', '#ffffff');
      }
    });
  }
});
jQuery(document).ready(function($) {
  var scroll_start = 0;
  var startchange = $('#blog');
  var offset = startchange.offset();
  if (startchange.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if (scroll_start >= offset.top) {
        $("#nav-toggle em").css('background-color', '#000000');
      }
    });
  }
});
jQuery(document).ready(function($) {
  var scroll_start = 0;
  var startchange = $('#contatti');
  var offset = startchange.offset();
  if (startchange.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if (scroll_start >= offset.top) {
        $("#nav-toggle em").css('background-color', '#ffffff');
      }
    });
  }
});

然后我试图用这个简化这个脚本：

jQuery(document).ready(function($) {
  var scroll_start = 0;
  var startchange = $('.white');
  var offset = startchange.offset();
  if (startchange.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if (scroll_start > offset.top) {
        $("#nav-toggle em").css('background-color', '#ffffff');
      }
    });
  }
});
jQuery(document).ready(function($) {
  var scroll_start = 0;
  var startchange = $('.dark');
  var offset = startchange.offset();
  if (startchange.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if (scroll_start > offset.top) {
        $("#nav-toggle em").css('background-color', '#000000');
      }
    });
  }
});

显然我把.white和.dark类放在哪里是ID，但是第二个脚本只适用于前两个块（＃homepage-header和#cosafacciamo），然后nav-toggle不再改变颜色。

为什么第一个脚本正常工作而不是第二个脚本？我做错了什么？

请帮忙！谢谢;）

Answer 1

当您设置var startchange = $('.white')时，该jQuery对象$('.white')包含多个DOM元素，但.offset()方法仅返回第一个的数字。

要解决此问题，请使用.each()循环遍历每个DOM元素。

您还可以使用JavaScript函数来保存代码DRY。尝试这样的事情（未经测试）：

function doMyThing(startchange,color) {
  var scroll_start = 0;
  if (startchange.length) {
    startchange.each(function() {
      var offset = $(this).offset();
      $(document).scroll(function() {
        scroll_start = $(this).scrollTop();
        if (scroll_start >= offset.top) {
          $("#nav-toggle em").css('background-color', color);
        }
      }); // scroll
    } // if
  } // doMyThing
});

jQuery(document).ready(function($) {
  doMyThing($('.white'),'#ffffff'); 
  doMyThing($('.black'),'#000000'); 
});

更改类的ID会破坏我的代码

1 个答案: