Question

我想为单个HTML按钮调用多个函数。但如果我点击一个按钮，它会调用我提到的特定功能。如果我在一段时间后点击一个相同的按钮，它会调用另一个由我决定的功能.....

例如这是我点击事件的代码：

<button type="button" id="outputClick" onclick="output_popup(this.id)"></button>

我需要在js文件中更改onclick事件的功能。所以请帮我用jQuery或Javascript为单个按钮应用很多功能。

注意：onclick事件调用的函数对于该click事件是唯一的。请避免冲突。

Answer 1

有两种选择：

最简单的方法是让被调用的函数决定您希望它调用哪些函数。也就是说，您只需要一个由事件处理程序调用的函数，该函数根据条件的变化来改变其行为。

你还没有说出什么改变，但是例如这里是一个在每次点击时调用不同功能的例子，当它到达结束时循环回到第一个：

＆＃13;

    var functions = [
      function() { snippet.log("Function #1"); },
      function() { snippet.log("Function #2"); },
      function() { snippet.log("Function #3"); },
      function() { snippet.log("Function #4"); }
    ];
    var index = 0;
    $("#outputClick").on("click", function() {
      functions[index]();
      index = (index + 1) % functions.length;
    });

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <button type="button" id="outputClick">Click Me</button><!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
    <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

＆＃13;

当然，请删除旧处理程序并附加一个新处理程序。

＆＃13;

    $("#outputClick").on("click", f1);

    function f1() {
      snippet.log("Function #1");
      $("#outputClick").off("click", f1).on("click", f2);
    }
    function f2() {
      snippet.log("Function #2");
      $("#outputClick").off("click", f2).on("click", f3);
    }
    function f3() {
      snippet.log("Function #3");
      $("#outputClick").off("click", f3).on("click", f4);
    }
    function f4() {
      snippet.log("Function #4");
      $("#outputClick").off("click", f4).on("click", f1);
    }

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <button type="button" id="outputClick">Click Me</button><!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
    <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

＆＃13;

Answer 2

我知道你想同时运行多个功能。那么为什么不把它们全部按顺序打电话。

现在他们不一定按顺序执行和返回。为了确保这一点，你必须使用回调或承诺。

＆＃13;

$("#clickthis").on("click", function() {
  a();
  b();
  c();
});



function a() {
  $('body').append('<p>this is function a</p>');
}

function b() {
  $('body').append('<p>this is function b</p>');
}

function c() {
  $('body').append('<p>this is function c</p>');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickthis">Call Functions</button>

＆＃13;

为单个HTML按钮的onclick事件调用动态函数

2 个答案: