0

单击时,我在我的网站上创建了一个按钮,我php使用某些文件发送数据ajax并返回结果。我正在使用的代码如下,

我的目标 :

  1. 第一次单击该按钮时。我想php使用某些文件发送数据ajax并返回结果,并且
  2. 第二次点击时,我只想隐藏内容,并且
  3. 当第三次点击它时,我只想显示容器而不再次调用ajax。

jQuery:

$(function() {
    $('#click_me').click(function(){
        var container = $('#container').css('display');
        var id = $('#id').html();
            if(container == 'none'){
                $.ajax({
                type: 'POST',
                data: {id: id},
                url: "ajax/get_items.php",
                }).done(function(data) {
                $('#container').html(data);
                }).success(function(){
                $('#container').show('fast');
                });
                }else if(container == 'block'){
        $('#container').hide('fast');
        }
        });
});

网页:

<input type="button" id="click_me" value="Click Me"/>
<div id="container"></div>
4

5 回答 5

3

jQuery的方式是这样的:

$(function() {
    $('#click_me').one('click', function() {
        $.ajax({
            // ... other params ...,
            success: function(result) {
                $('#container').html(result).show('fast');
                $('#click_me').click(function() {
                    $('#container').toggle('fast');
                });
            });
        });
    });
});

http://api.jquery.com/one/

http://api.jquery.com/toggle/

于 2013-05-31T05:48:28.833 回答
2

您可以使用counter

http://forum.jquery.com/topic/making-a-number-counter

(function () {
  var count = 0;

  $('table').click(function () {
    count += 1;

    if (count == 2) {
      // come code
    }
  });
})();

JQuery 鼠标点击计数器

您的代码的工作示例:-

http://jsfiddle.net/2aQ2g/68/

于 2013-05-31T05:48:02.583 回答
1

像这样的东西应该可以解决问题......

$("#click_me").click(function(){
  var $btn = $(this);
  var count = ($btn.data("click_count") || 0) + 1;
  $btn.data("click_count", count);
  if ( count == 1 ) {
    $.ajax({
      var container = $('#container').css('display');
      var id = $('#id').html();
      if(container == 'none'){
        $.ajax({
          type: 'POST',
          data: {id: id},
          url: "ajax/get_items.php"
    })
  }
  else if ( count == 2 ) {
    $('#container').hide('fast');
  }
  else {
    $('#container').show('fast');
    $btn.unbind("click");
  }
  return false;
});
于 2013-05-31T05:54:59.703 回答
0

一种方法是在用户每次单击按钮 ( http://api.jquery.com/addClass/ ) 时使用 jQuery 添加一个类调用计数,您可以在处理程序中获取计数值并基于您可以适当地处理点击。

于 2013-05-31T05:50:29.600 回答
0

您可以通过定义一个简单的变量来计算点击次数来做到这一点。

$(function() {
    var clickCount = 1; //Start with first click

    $('#click_me').click(function(){
        switch(clickCount) {
             case 1: //Code for the first click

                 // I am just pasting your code, if may have to change this
                 var container = $('#container').css('display');
                 var id = $('#id').html();
                     if(container == 'none'){
                         $.ajax({
                         type: 'POST',
                         data: {id: id},
                         url: "ajax/get_items.php",
                         }).done(function(data) {
                         $('#container').html(data);
                         }).success(function(){
                         $('#container').show('fast');
                         });
                         }else if(container == 'block'){
                 $('#container').hide('fast');
                 }
              break;
              case 2: 
                 //code for second click
                 break; 
              case 3:
                 //Code for the third click
                 break;      
        });
        clickCount++; //Add to the click.
});
于 2013-05-31T05:51:11.633 回答