jquery - jQuery中的切换效果

Question

我写了一个代码：

$('.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");
    }
}

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

Answer 1

我没有得到什么是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");
    }
}​);​

Answer 2

您也可以尝试更改禁用属性的此类代码：

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

Answer 3

$('.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");
    }
}