在具有相同索引 (i) 规则的多个元素上运行 .each()答案

【问题标题】：Run .each() on multiple element with the same index (i) rules在具有相同索引 (i) 规则的多个元素上运行 .each()
【发布时间】：2018-06-19 21:00:30
【问题描述】：

我正在开发一个轮播，逻辑运行良好。但我注意到我在多个 jQuery each() 方法中一遍又一遍地重复相同的代码。

function Project(url, defaultColor, subColor){
  this.url = url;
  this.defaultColor = defaultColor;
  this.subColor = subColor;
}
var project1 = new Project("images/preview--1.png", "#9AB999", "#C5DEC4");
var project2 = new Project("images/preview--2.png", "#EC7F7A", "#FFB3AF");
var project3 = new Project("images/preview--3.png", "#E4475C", "#C45C6A");
var project4 = new Project("images/preview--4.png", "#00999E", "#35CFD4");
var project5 = new Project("images/preview--5.png", "#355D7D", "6DA2CC");
var project6 = new Project("images/preview--6.png", "#283338", "#638B9E");
var project7 = new Project("images/preview--7.png", "#CDE377", "#AAB67A");
var projects = [project1, project2, project3, project4, project5, project6, project7];


var imageSource = $('.image-wrapper picture source'),
content = $('.carousel__content'),
circle1 = $('.expand-1st'),
circle2 = $('.expand-2nd');
var scrollPosition = 0;


function loadNextProject(){
  scrollPosition = scrollPosition + 1;
  if(scrollPosition === projects.length){
    scrollPosition = 0;
  }

  imageSource.each(function(i, elem) {
    var num = i + scrollPosition;
    if(num >= projects.length){ num = i + scrollPosition - projects.length;}
    var x = projects[num];
    var url = x.url;

    $(this).attr('srcset', url);
  });
  content.each(function(i, elem){
    var num = i + scrollPosition;
    if(num >= projects.length){ num = i + scrollPosition - projects.length;}
    var x = projects[num];
    var backgroundColor = x.defaultColor;
    // console.log(x)

    $(this).css({'background' : '' + backgroundColor + ''});
  });
  circle1.children('circle').each(function(i, elem){
    var num = i + scrollPosition;
    if(num >= projects.length){ num = i + scrollPosition - projects.length;}
    var x = projects[num];
    var backgroundColor = x.defaultColor;
    // console.log(x)

    $(this).css({'fill' : '' + backgroundColor + ''});
  });

  console.log(scrollPosition)
}

我想知道是否有办法循环遍历所有分配的元素imageSource、content、circle1 并使用具有相同索引设置的 .each() i：

var num = i + scrollPosition;
    if(num >= projects.length){ num = i + scrollPosition - projects.length;}
    var x = projects[num];

上面的代码在三个each()中重复了。我们可以只用一个 each() 来实现电流吗？

【问题讨论】：

这可能更合适 - 因为您在 Code Review 上展示了您想要改进的工作代码，而不是在 SO 上。
当然有办法；它被称为function。将代码移动到带有必要参数的函数中，然后改为调用该函数。
我不确定，老实说，我很想保持原样以便为代码提供上下文；虽然我们确实请求 minimal - 如在minimal reproducible example - 代码中，但我们需要足够的代码来重现所描述的问题，并且需要足够的代码来查看和理解它在响应什么事件时所做的事情（s ) 或互动。
我同意@DavidThomas，这是一个“我该怎么做 X”类型的问题，而不是代码审查请求。

标签： javascript jquery foreach

【解决方案1】：

我正在研究一个具有如下相关参数的函数，它可以工作。只是不确定这是否是最好的方法。任何建议请纠正我:)

function loadAll(element){
    element.each(function(i){
      var num = i + scrollPosition;
      if(num >= projects.length){ num = i + scrollPosition - projects.length;}
      var x = projects[num];

      var url = x.url,
      backgroundColor = x.defaultColor;
      //
      // console.log(element)

      if(element == imageSource){
        $(this).attr('srcset', url);
      }else if(element == content){
        $(this).css({'background' : '' + backgroundColor + ''});
      }else if(element == circle1){
        $(this).css({'fill' : '' + backgroundColor + ''});
        console.log('run this')
      }else{
        return;
      }

    });
  }
  loadAll(imageSource);
  loadAll(content);
  loadAll(circle1);

【讨论】：