Question

如何为click事件制作if语句？

例如，我已经单击按钮并触发了这些功能，如果再次单击该按钮，它将触发第二个功能，如果再次单击该按钮，则会触发第三个功能。在第三个功能之后，该按钮会自行禁用。

如何在jQuery中执行此操作？

Answer 1

你也可以用javascript来做。试试以下代码

    <html>
     <head>
      <script>
   var counter = 0;

    function myFunction() {
        counter++;
        if (counter == 1) one();
        if (counter == 2) two();
        if (counter == 3) three();
    }

    function one() {
        alert('first function');
    }

    function two() {
        alert('second function');
    }

    function three() {
        alert('third function');
    }
        </script > < /head>
    <body>
    <button onclick="myFunction()">Click Me... !!!</button > < /body>
    </html >

请参阅此DEMO

Answer 2

在第一次点击期间使用addClass()将类添加到jQuery元素中;在下一次单击期间，使用hasClass()检查是否存在类并采取不同的操作;在第二次点击结束时，使用removeClass() api删除课程。

Answer 3

尝试这样的事情。你可以设置一个全局变量作为它的标志

 <script type="text/javascript">

    $(document).ready(function () {
        var first = true;
        $("#myButton").click(function () {
            if (first) {
                first = false;
            }
            else {
                alert("you clicked for the second time");
            }

        });
    });


</script>
<body>
    <input type="button" id="myButton" value="clickhere" />
</body>

Answer 4

你可以在这里使用一个标志：

var flag = false;

jQuery('.button').click(function() {
    flag = !flag;

    if(flag) {
        // First Function    
    } else {
        // Second Function  
    }
});

Answer 5

这种方式（如果btn代表按钮）：

function first() {

  // Your code here

  btn.off().click(second);
}

function second() {

  // Your code here

  btn.off().click(third);
}

function third() {

  // Your code here    
}

btn.click(first);

Answer 6

还要经历： - http://jsfiddle.net/XwnGA/7/

var firstClick = true;
$(document).ready(function(){
  $("#test").click(function(){
    if(firstClick)
    {
        alert("firstclick");
        firstClick=false;
     }
    else
    {
       alert("second click");
    }

  });

});

Answer 7

可能您可以将所有函数放在一个数组中，然后根据全局范围内的计数器访问它们，该计数器充当索引。

像这样的东西

$(document).ready(function(){
    var count = 0;
    var funArray = [];
    funArray[0] = function(e) {
       e.preventDefault();
       $(e.target).text("first function");
    };
    funArray[1] = function(e) {
       e.preventDefault();
       $(e.target).text("second function");
    };
    funArray[2] = function(e) {
       e.preventDefault();
       $(e.target).text("third function");
    };
    $("a").click(function(e){
        e.preventDefault(); 
        if (count < funArray.length )
            funArray[count++](e);
        /*you could leave it with this in case you dont want the
        link to take over its default behavior. 

        But if you want the link to take over its default behavior
        you can add the following else condition :

        else
            $(this).off('click'); 
        */
    });
});

通过这种方式，您可以为click事件提供所需的功能。 Fiddle

Answer 8

浏览此链接。 http://jsfiddle.net/5Ng8T/

在视图中的按钮标记上使用data- *属性。

<input id="butn" type="button" value="Test" data-click="1">

jquery代码就像这样

$("#butn").click(function(){
var attrVal = $("#butn").attr("data-click");
switch(attrVal)
{ 

  case "1":
      first();
      $("#butn").attr("data-click","2")
      break;
  case "2":
      second();
      $("#butn").attr("data-click","3")
      break;
  case "3":
      third();
      break;
  default:
      alert("hello");
      break;
}
});

function first(){
alert("first");
}

function second(){
alert("second");
}

function third(){
alert("third");
}

如果在jquery中单击事件的语句

8 个答案: