javascript - 设置 ONE on.click 以获取更多操作 - javascript 和 jQuery

Question

我有一些动态生成按钮，可以将我带到特定页面。

我需要检索data-num为每个按钮自动生成的，用它来为同一个按钮设置 jQuery 选择器。因此，当我单击按钮时，我将被重定向到（pdf.js 的）页面。

不过，在我的解决方案中，我需要单击两次才能转到该页面。

• 第一次点击是设置变量i
• 第二次点击是实际进入页面

我正在寻找一种奇特的解决方案，它只允许我单击一下

$('.pag').click(function(){
 let i= $(this).data('num');
 //let desiredPage= $(this).data('num');
 console.log(i);

 console.log(i);
  $('#pag-'+ i).click(function(){
queueRenderPage(i);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="pag-1" data-num="1" class="prev-next pag">1</div>
    <div id="pag-2" data-num="2" class="prev-next pag">2</div>
    <div id="pag-3" data-num="3" class="prev-next pag">3</div>
    <div id="pag-4" data-num="4" class="prev-next pag">4</div>
     .....

标签： javascriptjqueryonclick

Answer 1

只需queueRenderPage()在第一次单击时使用相应的数字执行：

$('.pag').click(function() {
  let i = $(this).data('num');
  queueRenderPage(i);
})

//
function queueRenderPage(i) {
  console.log("queueRenderPage("+i+")");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="pag-1" data-num="1" class="prev-next pag">1</div>
    <div id="pag-2" data-num="2" class="prev-next pag">2</div>
    <div id="pag-3" data-num="3" class="prev-next pag">3</div>
    <div id="pag-4" data-num="4" class="prev-next pag">4</div>
     .....