Question

我想知道是否有可能达到以下情况：

我在html表单中输入了类型按钮（假设按钮在此实例中该颜色为红色），当您单击它以执行ajax调用（并显示div）时，其颜色将为也变成了绿色。它应该保持这种状态，直到它再次点击它会变回原来的颜色并隐藏上面提到的div。

这种方法适用于所有浏览器（包括IE）？此外，它是否可能在第三次点击后跳过ajax调用？很抱歉我现在无法提供代码示例，（目前我无法访问我的笔记本电脑）。

这是困扰我的事情，任何建议都非常受欢迎。

Answer 1

我认为这应该有用 - 所以你有HTML

<input id="clickIt" type="button">Click here</input>
<div id="AJAXDiv">

</div>

然后是jQuery

timesClicked = 0;
$('input#clickIt').click(function() {
    if($(this).hasClass('makeItGreen') {
        $(this).removeClass('makeItGreen')
    }
    else { $(this).addClass('makeItGreen'); }
    if(timesClicked === 0) {
        $('div#AJAXDiv').load('myurl.php');
    }
    else if(timesClicked % 2 === 0) {
        $('div#AJAXDiv').hide();
    }
    else {
        $('div#AJAXDiv').show();
    }
    timesClicked++;
});

Answer 2

如果你只想在第一次点击时加载AJAX（我假设你的意思是在第三次点击后没有加载：加载和显示，隐藏，显示等等），只需使用{{1 }}。然后，使用.one()进行其余的点击处理：

.on()

JSFiddle Demo

Answer 3

当您拨打.ajax请求时，它会为您提供“状态”。查看：http://api.jquery.com/jQuery.ajax/

跟踪用户点击按钮的次数，如果超过三次，请不要调用ajax请求。

 if(clicked < 3){
  .ajax(...)
 }

Answer 4

为什么不加载一次ajax而不是按钮呢？

HTML：

<input type="button" value="Show / hide" class="btn_normal" />
<div class="content">Loading...</div>

CSS：

.btn_normal { background-color: red; }
.btn_selected { background-color: green; }
.content { display: none; }

JavaScript的：

$(function() {

    // Load AJAX once
    $(".content").load("MY_FILE.aspx");

    // Do the button stuff
    $(".btn_normal").click(function() {
        $(this).toggleClass("btn_selected");
        $(".content").stop(true, true).slideToggle();
    });

});

编辑：

或者如果你真的需要加载ajax三次：

JavaScript的：

var clickCount = 0;
$(function() {

    // Do the button stuff
    $(".btn_normal").click(function() {
        clickCount++;

        if (clickCount == 1 || clickCount == 3 || clickCount == 5) {

            // Load AJAX
            $(".content").load("MY_FILE.aspx");

        }

        $(this).toggleClass("btn_selected");
        $(".content").stop(true, true).slideToggle();
    });

});

Answer 5

我不是计算点击量的忠实粉丝。在这种情况下，我通常使用类的存在来指示元素的状态。这是我的解决方案，可在a fiddle中找到。

var asyncData = false;

$('.hiddenDiv').hide();

$(".clickBtn").click( function(evt) {
    if ( $(this).hasClass('btnWorking') ) {
        $(this).removeClass('btnWorking');
        $('.hiddenDiv').hide();
    } else {
        $(this).addClass('btnWorking');
        $('.hiddenDiv').show();
        if (!asyncData) {
            $.ajax({
                url: '/echo/html/',
                data: {
                    html: '<p>This is the ajax HTML</p>',
                    delay: 2
                },
                method: 'post'
            }).done( function(data) {
                asyncData = data;
                $('.hiddenDiv').append(data);
            });
        }
    }
});

单击更改按钮颜色

5 个答案: