Question

我在html页面的div中有多个按钮，我想单击B键时单击在视口中可见的购买按钮。

$(document).keydown(function(e) {
  if (e.keyCode == 66) {
    //click the visible buy button in viewport , 
    $(".buy").click();
  }
});

<section>
  <div class="buy">BUY</div>
  <div class="buy">SELL</div>
</section>
<section>
  <div class="buy ">BUY</div>
  <div class="buy ">SELL</div>
</section>
<section>
  <div class="buy ">BUY</div>
  <div class="buy ">SELL</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注意：“购买”按钮有100个，但是在视口中一次只能显示1个“购买”按钮

Answer 1

您可以尝试使用此便捷功能，该功能告诉我们按钮在视口中是否可见，这是我在此blog中找到的。同样，请创建与sell相同的css类buy并将其设置为卖出div's，因为我们需要区分两个按钮！

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(document).keydown(function(e) {
  if (e.keyCode == 66) {
    //click the visible buy button in viewport , 
    $(".buy").each(function( index ) {
      if($(this).isInViewport()){
      console.log($(this).html() + " - " + index);
        $(this).click();
      }
    });
  }
});

section {
  height: 100vh;
  width: 100%;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="buy">BUY</div>
  <div class="sell">SELL</div>
</section>
<section>
  <div class="buy">BUY</div>
  <div class="sell">SELL</div>
</section>
<section>
  <div class="buy">BUY</div>
  <div class="sell">SELL</div>
</section>

Answer 2

如果其他INSTEAD OF INSERT按钮确实不可见，您可以尝试以下操作：

.buy

否则，请通过以下方式获得可见的部分：

 $(".buy:visible").click();

（x和y是var myVisibleSection = document.elementFromPoint(x+10, y+10);的父元素的位置，该父元素与可见部分匹配，可以通过jquery（sections）或vanilla js获得它们。10的值是border和padding的总和的父母。）

现在：

.offset()

单击在视口中可见的按钮

2 个答案: