jQuery中的切换效果答案

【问题标题】：toggle effect in jqueryjQuery中的切换效果
【发布时间】：2012-08-08 12:13:46
【问题描述】：

我写了一个代码：

$('.Edit').live('click', function() {
    if ($(this).text().valueOf()=="Save"){
        alert('sauvegarder..');
        var id = $(this).attr("id");
        $(".d"+id).prop('enabled', false);
        $(".d"+id).css("background-color","#FFF");
        $(".d"+id).css("border-color","black");
        $(this).text('Save').button("refresh");
    } else if($(this).text().valueOf()=="Edit") {
        alert('editer..');
        var id = $(this).attr("id");
        $(".d"+id).prop('disabled', false);
        $(".d"+id).css("background-color","#FFF");
        $(".d"+id).css("border-color","red");
        $(this).text('Save').button("refresh");
    }
}

它有这个功能：按钮通常处于“编辑”模式，当我点击所有输入元素时，我可以在其中写入内容，同时按钮名称更改为“保存”。当我点击保存时，输入被禁用，我不能再写了。但是当我执行此代码时，它会在同一时间完成，所以我有两个警报和输入保持启用状态。我想要某种切换效果，我想知道它是否可能。

【问题讨论】：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件。
if/else 语句的两个代码块都将按钮文本设置为“保存”。你真的想要这个还是应该将其中一个设置为“编辑”？
只是其中之一，但最大的问题是它同时制作所有东西。它一个接一个地提醒我'editer'和'sauvegarder'（抱歉英语不好）

标签： jquery button input toggle

【解决方案1】：

$('.Edit').live('click', function() {
    var el = $(this);   
        var r = $(".d"+el.attr("id"));
        if (el.hasClass('editMode')){
        el.removeClass('editMode');
                alert('sauvegarder..');
        r.attr("disabled", "disabled").css({
                    "background-color":"#FFF",
                    "border-color":"black"
                });
        el.text('Save').button("refresh");
    } else {
        el.addClass('editMode');
                alert('editer..');
        r.removeAttr("disabled").css({
                    "background-color","#FFF",
                    "border-color","red"
                });
        el.text('Save').button("refresh");
    }
}

【讨论】：

【解决方案2】：

我没有得到 enabled 属性。你也可以链接事件或缓存它。

$('.Edit').on('click','.Edit', function() {
    if ($(this).text().valueOf()=="Save"){
        alert('sauvegarder..');
        var id = $(this).attr("id");
        $(".d"+id).prop('disabled', true)
                  .css({"background-color":"#FFF", "border-color":"black"});
        $(this).text('Save').button("refresh");
    } else if($(this).text().valueOf()=="Edit") {
        alert('editer..');
        var id = $(this).attr("id");
        $(".d"+id).prop('disabled', false)
                  .css({"background-color":"#FFF", "border-color":"red"});
        $(this).text('Save').button("refresh");
    }
});

【讨论】：

【解决方案3】：

您也可以尝试这样的代码来更改禁用属性：

... $(".d"+id).attr('disabled', 'disabled').css(...) ....

【讨论】：