javascript - Div 类，当 div 在屏幕上但每个 div 只显示一次时显示警报？

Question

我有一个函数，每次 div class=promote 出现在屏幕上时我都想显示一个警告。但是此警报可能每个 div 只显示一次。

我的问题是，我无法获取 div 的数据 ID，并且当它出现在屏幕上时，每个 div 不能只显示一次警报，只有第一个一直触发警报。

有什么解决办法吗？

function elementInView(elem) {
  return $(window).scrollTop() < $(elem).offset().top + $(elem).height();
};

$(window).scroll(function() {
  if (elementInView($('.promote'))) { //how to get any promote, not only the first? show alert only once per promote seen?
    var dataid = $(this).data("id"); //how to get data-id of the active class?
    alert(dataid);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br>

<div class=promote data-id=1>div 1</div>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<div class=promote data-id=2>div 2</div>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<div class=promote data-id=3>div 3</div>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<div class=promote data-id=4>div 4</div>

http://jsfiddle.net/y8fhnLt9/

Answer 1

我认为您用来检查元素是否在视口(viewport)中的函数也需要一些修正。

http://jsfiddle.net/tsq4ngcf/1/

function elementInView(elem){
    var shown = $(elem).data("shown");
  if(shown){
    return false;
  } 
  var elTop = $(elem).offset().top;
  var elBottom = $(elem).offset().top + $(elem).outerHeight();
  var screenBottom = $(window).scrollTop() + $(window).innerHeight();
  var screenTop = $(window).scrollTop();

  if ((screenBottom > elTop) && (screenTop < elBottom)){
    return true;
  } else {
    return false;
  }
}


$(window).scroll(function(){
    $('.promote').each(function() {
    if (elementInView(this)) {
        var dataid = $(this).data("id");
      $(this).attr('data-shown','1');
      alert(dataid);
     }

    }
  );

});