javascript - 如果另一个 div 宽度达到其位置，如何将类添加到元素

Question

我遇到了一些问题，需要你的帮助，我一直在尝试找出一个 javascript 函数，但我无法通过 cms< 的简单轻量级公式来获得它 使用。

我有歌曲的进度条。在进度条下方有一个包含图像的 strip ，这些图像也有悬停效果，我想如果上面的进度到达任何人，下面的图像位置将它的广告和事件类剥离到图像并删除类在它通过图像的末尾之后。请检查工作播放器的 fiddle 。

#containment-wrapper2 {
  width: 100%;
  height: 30px;
  background: #aaa;
}

#progress {
  background: #000;
  height: 30px;
}

#containment-wrapper {
  width: 100%;
  height: 30px;
  background: #eee;
}

.comment {
  background: #000;
  position: absolute;
}

.comment:hover,
.comment.active {
  background: red;
  transform: scale(1.5);
}

<div id="containment-wrapper2">
  <div id="progress" style="width:41.2%;"></div>
</div>


<div id="containment-wrapper" style="width:100%; height:30px; background:#eee;">

  <img id="coment1" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style=" left:46.3%;" />
  <img id="coment2" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:26.3%;;" />
  <img id="coment3" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:36.3%;" />
  <img id="coment4" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:51%;" />
  <img id="coment4" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:51.6%;" />
  <img id="coment5" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:38%;" />
  <img id="coment6" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:21%;" />
  <img id="coment7" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:6.3%;" />
  <img id="coment8" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:12.6%;" />
  <img id="coment9" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:90%;" />
  <img id="coment10" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:70%;" />

</div>

</div>

我正在寻找类似 soundcloud 的评论系统。

我真的深陷其中，并寻求一种轻量级和简单的解决方案，可以动态工作，因为评论 ID 将来自数据库，我无法将手动 ID 写入任何 js 函数。

我想当这个类“jp-play-bar”到达图像底部的开始时它向图像广告类“active”并且当它到达图像的末尾时它删除事件类

提前致谢

这是一个 fiddle

Answer 1

您使用了一个函数来比较进度条的位置和图像的左侧位置，然后在每次进度条发生变化时调用此函数。 您可以在事件时间更新上调用此函数，以确保进度条正在发生变化:

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

现在是 highlightImg 函数:

function highlightImg(progress){    
  progress = parseFloat(parseFloat(''+progress).toFixed(1)); // normalize the values to be compared easily
  var imgs = $('img.comment');
  imgs.map(function (i, im)
    {   
      var img = $(im);
      var currentImgLeftPos = parseFloat(parseFloat(im.style.left).toFixed(1)); // get the left position of the current image
      console.log(progress); // logs the progress bar width
      console.log('left' ,currentImgLeftPos); // logs the left postion of the images
      img.removeClass('active'); // remove active from other images
            if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + 3  ) { // I just added an interval where the images can be shown otherwise the effect will very quick
        img.addClass('active'); // add the class when needed
      }
    }
  );
}

希望这会有所帮助。我还更新了你的 fiddle :http://jsfiddle.net/XLNCY/22626/