Javascript 迭代元素重叠/碰撞函数

我有一个工作函数，可以检测正方形指示器是否与背景较暗的行重叠。如果重叠，指示器应变为白色，如果不重叠，指示器应变为黑色

我陷入困境的部分是，我有许多行具有黑色背景，而它目前只在第一个黑色背景上工作，因为我没有迭代所有的黑色背景，只是第一个

我曾尝试在许多地方放置一个each函数，但似乎无法使其工作

函数isColliding（）{
//第一组资料
var indicator_offset=$（'.indicator'）.offset（）；
变量指示器高度=$（'.indicator'）。外部高度（真）；
var indicator_width=$（'.indicator'）。外径（真）；
var指示器与顶部的距离=指示器偏移量。顶部+指示器高度；
var指示符与左的距离=指示符偏移量。左+指示符宽度；
//第2部分数据
var dark_row_offset=$（'.dark'）.offset（）；
var dark_row_height=$（'.dark'）。outerHeight（true）；
var dark_row_width=$（'.dark'）。外径（真）；
var dark_row_distance_from_top=dark_row_offset.top+dark_row_height；
var dark_row_distance_from_left=dark_row_offset.left+dark_row_width；
var not_Collisding=（指示器_distance_from_topdark_row_distance_from_top |指示器_distance_from_leftdark_row_距离_）；）；
返回！不要碰撞；
};
$（窗口）.on（'scroll'，function（）{
if（isColliding（））{
$（'.indicator'）.removeClass（'on-light'）.addClass（'on-dark'）；
}否则{
$（'.indicator'）.removeClass（'on-dark'）.addClass（'on-light'）；
}
})

.row{
高度：200px；
宽度：100%；
}
.行.灯{
背景色：#eeeeee；
}
.黑暗{
背景色：黑色；
}
.指标{
宽度：30px；
高度：30px；
位置：固定；
顶部：0px；
左：50%；
转化：translateX（-50%）；
}
.指示灯{
背景色：黑色；
}
.指示灯亮-暗{
背景色：白色；
}

---

您的代码只检查第一个“暗”元素，而不是循环检查所有暗元素。因此，改变你的方法如下，使其工作。 我相信你可以进一步优化它

 function isColliding() {
 // Div 1 data
 var indicator_offset = $('.indicator').offset();
 var indicator_height = $('.indicator').outerHeight(true);
 var indicator_width = $('.indicator').outerWidth(true);
 var indicator_distance_from_top = indicator_offset.top + indicator_height;
 var indicator_distance_from_left = indicator_offset.left + indicator_width;

 var isCollidingAtLeastOneDark = false;

 $( '.dark' ).each(function( index ) {       
   var dark_row_offset = $(this).offset();
   var dark_row_height = $(this).outerHeight(true);
   var dark_row_width = $(this).outerWidth(true);
   var dark_row_distance_from_top = dark_row_offset.top + dark_row_height;
   var dark_row_distance_from_left = dark_row_offset.left + dark_row_width;

   var not_colliding = (indicator_distance_from_top < dark_row_offset.top || indicator_offset.top > dark_row_distance_from_top || indicator_distance_from_left < dark_row_offset.left || indicator_offset.left > dark_row_distance_from_left);

    if( !not_colliding) {
       isCollidingAtLeastOneDark = true;
       return false; //breakout from loop
    }
 });
  console.log(isCollidingAtLeastOneDark);
  return isCollidingAtLeastOneDark;    
 };

函数isColliding（）{
//第一组资料
var indicator_offset=$（'.indicator'）.offset（）；
变量指示器高度=$（'.indicator'）。外部高度（真）；
var indicator_width=$（'.indicator'）。外径（真）；
var指示器与顶部的距离=指示器偏移量。顶部+指示器高度；
var指示符与左的距离=指示符偏移量。左+指示符宽度；
var isCollidingAtLeastOneDark=false；
$（'.dark'）。每个（函数（索引）{
var dark_row_offset=$（this.offset（）；
var dark_row_height=$（this）.outerHeight（true）；
var dark_row_width=$（this）.outerWidth（true）；
var dark_row_distance_from_top=dark_row_offset.top+dark_row_height；
var dark_row_distance_from_left=dark_row_offset.left+dark_row_width；
var not_Collisding=（指示器_distance_from_topdark_row_distance_from_top |指示器_distance_from_leftdark_row_距离_）；）；
如果（！不碰撞）{
isCollidingAtLeastOneDark=真；
返回false；//从循环中断开
}
});
控制台日志（isCollidingAtLeastOneDark）；
返回IsCollidGatleastonedArk；
};