Question

我有一个函数，希望每次在屏幕上显示div class = promote时都显示警报。但是此警报每格只能显示一次。

我的问题是，我无法获得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

您正在寻找这样的东西，请注意，尽管它并未真正优化，因为它遍历每个滚动条上的所有元素...还有一些优化空间：

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

let shownElements = [];

$(window).scroll(function(){
  let elements = $('.promote');
  for (let i = 0; i < elements.length; i++) {
    let element = elements[i];
    if (elementInView(element)) { // check if the element is in view
      if (!shownElements.includes(element)) { // check if element already alerted/shown
        let dataid = $(element).attr("data-id"); // get the data-id value
        console.log("IN VIEW", element, dataid);
        shownElements[i] = element;
      }
    }
  }
});

已更新以跟踪已显示哪些元素。所以我们只发射一次。

http://jsfiddle.net/mxmz_/wzh2xvdo/24/

Answer 2

我认为您用来检查元素是否在视口中的函数也需要进行一些更正。

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);
     }

    }
  );

});

div班级，在屏幕上显示div时显示警报，但每个div仅显示一次吗？

2 个答案: