如果两个 div 在同一位置重叠，如何一次添加一个类

Question

我陷入了一个问题并尝试了很多，但无法得到解决方案。

发生的情况是，有一个 mp3 播放器，在该播放器下方有一个条带，其中包含基于 mp3 进度的图片（来自用户的 cmets）。

当播放器的进度条到达图像的开头时，它会向图像添加“活动”类，以便人们可以看到此时该用户发表了评论。

现在我面临的问题是，在 01:46 有两个图像相互重叠，由于这种重叠，javascript 正在为两个我不想要的图像添加活动类，我想要进度条到达第一个图像的开头，它将使其处于活动状态，但是一旦第二个图像开始（重叠），第二个图像就会激活，因此一次只有一个活动。与 soundcloud cmets 相同。

无论第一张图片的持续时间是否会更短，但这就是我想要实现的，因为这些图片将是动态的，用户可以选择他们想要评论的任何地方，我无法为重叠的图片指定特定的类，所以有些东西需要通过javascript完成，我被卡得很厉害。

因为现在有两个重叠，但将来它可以是三个四个或多少重叠所以我想要一个效果，当我们在这些图像上从左到右移动鼠标时，悬停效果如何使图片处于活动状态，并且作为第二个图片获得焦点并变得活跃，我希望它是那样的。

有专家可以帮我解决这个问题吗？

我正在使用这个函数来获取进度条的左侧位置遇到图像添加“活动”类，当图像的宽度结束时它将删除活动类

$(document).ready(function() {

 function highlightImg(progress){
 progress = parseFloat(parseFloat(''+progress).toFixed(1));
    var imgs = $('img.comment');
    imgs.map(function (i, im)
    {   
      var img = $(im);
      var currentImgLeftPos = parseFloat(parseFloat(im.style.left).toFixed(1));
      var currentImgRightPos = $(this).width() / $(this).parent().width() * 100;
      console.log(progress);
      console.log('left' ,currentImgLeftPos);
      img.removeClass('active'); // remove active from other images
            if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos  ) {
                $('#imgwidimg').text('this'+currentImgRightPos);
        img.addClass('active'); // add the class when needed
      }
    }
  );
}

通过这个功能，我正在更新 jplayer 进度

$('#jquery_jplayer_2').on($.jPlayer.event.timeupdate, function(e){
   var progress = document.querySelector('.jp-play-bar').style.width;
   highlightImg(progress);
});

Here's a fiddle 演示问题。

Answer 1

请尝试一下。

 if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos  ) {
                $('#imgwidimg').text('this'+currentImgRightPos);
        imgs.removeClass("active");  //add this line to your code
        img.addClass('active'); // add the class when needed
      }