javascript - 单击时更改按钮颜色

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 在第一次单击时加载（这就是我假设您在第三次单击后不加载的意思：加载和显示、隐藏、显示等），只需使用.one(). 然后，.on()用于其余的点击处理：

$("#myButton").one('click', function () {
    $("#result").html(ajax_load).load(loadUrl); // Or whatever your AJAX code is
});

$("#myButton").on('click', function () {
    $(this).toggleClass('green');
    $("#result").toggle();
});

JSFiddle 演示

Answer 3

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

跟踪用户点击按钮的次数，如果超过3次，就不要调用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

我不喜欢计算点击次数。在这种情况下，我通常使用类的存在来指示元素的状态。这是我的解决方案，可在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);
            });
        }
    }
});