将one on.click设置为更多操作-javascript和jQuery

Question

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

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

在我的解决方案中，我需要单击两次以转到页面。

• 第一步是设置变量i
• 第二次单击实际上是转到该页面

我在searchig寻找一种出色的解决方案，该解决方案只允许我单击一下

 $('.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> ..... 

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> ..... 

Answer 2

您无需使用函数即可执行此操作。

 $('.pag').click(function(){ let i= $(this).data('num'); //let desiredPage= $(this).data('num'); console.log(i); 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> .....