Javascript 如何通过使用jQuery的函数执行此特定任务？

我正在这个垂直滚动画廊工作。 现在我无法解决这个问题，但我需要让这段代码不那么冗长。 我一直在写的代码是重复的。 这是密码

var target1 = $("#myImg1").offset().top;
var target2 = $("#myImg2").offset().top;

if ($(window).scrollTop() >= target1 - 150 
 && $(window).scrollTop() <= target1 + 150) {
    showBgOnTop('#firstImage','#secondImage');  
}
if ($(window).scrollTop() >= target2 - 150 
 && $(window).scrollTop() <= target2 + 150) {
    showBgOnTop('#secondImage','#firstImage');
}

var target1=$（“#myImg1”）.offset（）.top；
var target2=$（“#myImg2”）.offset（）.top；
如果（$（窗口）.scrollTop（）>=target1-150
&&$（窗口）.scrollTop（）=target2-150
&&$（window）.scrollTop（）这实际上是一个jQuery函数

你能做的唯一减少代码的事情就是使用

$(window).scrollTop()

作为变量：

var windowScrollTop = $(window).scrollTop();

剩余部分是一个条件，您不能使用条件作为变量。
这样如何：

function show(image1id, image2id) {
  var target1 = $(image1id).offset().top;
  var target2 = $(image2id).offset().top;

  if (($(window).scrollTop() >= target2 - 150) &&
       $(window).scrollTop() <= target2 + 150)) {
    showBgOnTop(image1id, image2id);
  }
}

show('#firstImage','#secondImage');
show('#secondImage','#firstImage');

功能显示（image1id，image2id）{
var target1=$（image1id）.offset（）.top；
var target2=$（image2id）.offset（）.top；
如果（$（窗口）.scrollTop（）>=target2-150）&&
$（窗口）.scrollTop（）说明
似乎您有一个jQuery对象作为您的目标，它链接到两个图像，并且您希望有多个这样的实例，比如至少2个

所以我的解决方案是用这种格式创建一个对象数组

var array = [
    {target: ['image1', 'image2']}
]

target
是目标元素
id
，值是关联图像的id数组

现在，用户所要做的就是继续以上面显示的格式向数组添加新对象

解决方案
//将目标对象id作为键，将链接/关联元素的数组作为值
var arrs=[
{'myImg1'：['firstImage'，'secondImage']}，
{'#myImg2'：['#secondImage'，'#firstImage']}，
{#myImg3'：['…'，'…']}//继续在此处添加新项作为对象
],
$windowScrollTop=$（window）.scrollTop（）；//缓存窗口滚动函数
//在这里循环数组
$.each（arrs，function（idx，obj）{
用于（obj中的id）{
var$el=$（id），//在此处缓存目标元素
args=obj[id]，
img1=args[0]。toString（），
img2=args[1]。toString（）；
如果（$windowScrollTop>=$el-150&&$windowScrollTop你能给我们展示一下你的垂直图库应该是什么样子吗？这样我们可以提供更好的答案它的代码很长，但让我在这里告诉你这个想法。随着垂直拇指的移动，与之相关的背景图像会在背景中发生变化。#第一幅图像bg pic移到顶部。#第二幅图像moves到底。你能给我解释一下吗。我在这里是个新手。使用开关盒怎么样？然后你可以用它来代替if idx块，但它可能会变得很长。是的，但idx块的情况怎么样，无论如何，谢谢。解释一下为什么解决方案是这样通常会很有帮助，@dcodesmith。
// Put the target object id as keys and the array of the linked/associated elements as values
var arrs = [
        {'#myImg1': ['#firstImage', '#secondImage']},
        {'#myImg2': ['#secondImage', '#firstImage']},
        {'#myImg3': ['...', '...']} // keep adding new items as object here
    ],
    $windowScrollTop = $(window).scrollTop(); // cache window scroll function

// loop through the array here
$.each(arrs, function (idx, obj) { 
    for (id in obj) {
        var $el = $(id), // cache the target element here
            args = obj[id],
            img1 = args[0].toString(),
            img2 = args[1].toString();

        if ($windowScrollTop >= $el - 150 && $windowScrollTop <= $el + 150) {
            showBgOnTop(img1, img2);
        }

    }

});