代码之家 › 专栏 › 技术社区 › Gracie williams

单击在视口中可见的按钮

jquery javascript

Gracie williams · 技术社区 · 6 年前

$(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个“购买”按钮

2 回复 | 直到 6 年前

Hassan Sadeghi 6 年前

如果是其他 .buy 按钮 真的看不见 ,您可以尝试:

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

 var myVisibleSection = document.elementFromPoint(x+10, y+10);

(x和y是您的 sections 与visible部分匹配,可以通过jquery获取( .offset() )或者香草js。10是父级的边框和填充的总和。)

myVisibleSection.find(".buy").click();

Naren Murali 6 年前

你可以试着使用这个方便的函数,它告诉我们这个按钮在视窗中是否可见,我在这里找到了 blog . 也请制作css类 sell 这和 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>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

2 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前