如何运行 onload 函数，然后从 onclick 事件再次调用它答案

【问题标题】：How do I run a function onload and then call it again from an onclick event如何运行 onload 函数，然后从 onclick 事件再次调用它
【发布时间】：2016-08-19 16:09:32
【问题描述】：

这是我的功能

$(document).ready(function() {
    "use strict";

    var $rows_views = $('.view-display-id-block_1 .view-content').find('[class*="views-row-"]'); 
    $rows_views.each(function(index) { 
        $('.show-more').click(function() {
            if (index > (($rows_views.length / 3) - 1)) { 
                $('.views-row-' + (index + 1)).toggle(); 
            } 

            $('.pager').toggle(); 
        });
    });
});

我想运行它来隐藏行，然后在单击按钮时切换它以显示它们。如何在文档就绪时运行函数，然后在单击事件中再次运行该函数？

【问题讨论】：

您将代码放入一个函数中，从 $(document).ready 调用该函数，并在您的点击事件中指定相同的函数
您可以将其包装到一个函数中并通过 onClick 重用该函数
+ 还考虑使用 DOM 遍历而不是增量类/id 属性。它使您的代码更简单，更干燥
能否用你要重构的函数更新问题？

标签： javascript jquery

【解决方案1】：

正如其他人在上面的 cmets 中所说，您可以将您在 click 事件中调用的函数移到文档就绪函数的顶部，然后在 click 事件中再次调用它（按名称）：

$(document).ready(function() {
    "use strict";

    // Invoke your function here
    callMeTwice();


    // define your function here
    function callMeTwice () {
        // Do some stuff
    }

    // Invoke your function again within the click event here
    $(domElement).click(callMeTwice);
});

【讨论】：

【解决方案2】：

您在(document).ready() 范围之外创建您的function，您应该能够从您的element 和您准备好的function 调用

$(document).ready(function(){
  myFunc(); // You call your function here
  
  });

function myFunc() {
  alert('click'); // You do your action here aka hide show
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p onclick="myFunc();">click me </p><!--note the onclick attribute-->

【讨论】：

【解决方案3】：

你只需要添加一个 .click() 函数并将你的 $rows_vies_each 东西放在一个函数中。

这样

$(document).ready(function() {
"use strict";

var clickMe = document.getElementById('idOfThingToClick')

var $rows_views = $('.view-display-id-block_1 .view-content').find('[class*="views-row-"]'); 

function bestFunction(){
  $rows_views.each(function(index) { 
      $('.show-more').click(function() {
          if (index > (($rows_views.length / 3) - 1)) { 
              $('.views-row-' + (index + 1)).toggle(); 
          } 

          $('.pager').toggle(); 
      });
  });
}
$(clickMe).click(function(){
  bestFunction();
})
});

【讨论】：