使用 JQuery 切换属性答案

【问题标题】：Attr toggle with JQuery使用 JQuery 切换属性
【发布时间】：2012-09-14 17:51:39
【问题描述】：

我有一个输入表，我可以在双击时激活和停用。现在这个输入已经预先填充了来自 DB 的一些数据。因为用户必须按下按钮才能在双击输入并更改后更新数据库，所以我想存储输入的值，以防用户决定在更改后单击另一个单元格而不按下按钮我然后可以替换原始未发送的值。我正在使用 jquery 来执行此 attr 切换以只读更改输入，但我对 jquery 的了解有限，无法实现我想要的。Here is some example code

谢谢

【问题讨论】：

我没有得到您真正要问的问题，这里的保存按钮在哪里，是每个单元格特定的保存按钮，您能否正确地将帖子分成段落并详细说明您面临的问题，以便我们为您提供帮助
attr 方法不返回布尔值。您可以改用prop 方法。
对不起，我没有正确解释自己。不在小提琴上的“此按钮”使用class="active" 查找.find 输入并获取其值以执行AJAX。
对不起，我没有正确解释自己。不在小提琴上的“此按钮”使用class="active" 查找.find 输入并获取其值以执行AJAX。由于输入的行为方式，用户可以激活单元格对其进行修改，并且无需点击保存按钮即可移动到另一个单元格，而无需知道单元格值没有发送到数据库。因此，我的想法是这样当用户从一个单元格移动到另一个单元格而不保存旧单元格的内容时，而不是旧单元格显示他们键入的内容，它会显示原始内容，因为他们没有保存它。

标签： javascript jquery dom attributes attr

【解决方案1】：

如果我理解这个问题，您希望在用户修改数据之前存储数据，并在用户不保存他们所做的更改时恢复数据。

如果我正确理解了问题，我会使用$.data() 来维护旧值。它本质上允许您将键值对保留在 html 元素中，因此为输入保留字符串备份相当容易。将此添加到 dblClick 以备份值：

$input.data("backup", $input.val());

并添加它以将其恢复为原始值：

function backup ($input) {
  $input.val($input.data('backup'));
}

【讨论】：

好的，你有我的问题 :) 现在你看到我正在使用$(this).attr('readonly',!$(this).attr('readonly')); 来切换只读属性，老实说，我不确定它是如何工作的。所以我的下一个问题是，我怎么知道元素何时被停用以便将数据替换回原始数据？顺便说一句，谢谢！
视情况而定。如果用户在输入之外单击而不单击保存，您是否希望该值恢复？如果是这种情况，我会将备份代码添加到 $.blur 添加到输入中。此外，在点击保存时，我会将备份值设置为当前输入值，因此如果用户立即离开该框，则该值将恢复为自身。
我决定走.blur() 路线，但我遇到了确定焦点是否丢失到按钮的问题[代码][1]。 [1]:jsfiddle.net/PnSdC/13
解决了！！我能够用 setTimeout 捕捉到它 - window.setTimeout(function(){ if($('button').is(':focus')){ alert("button has focus");}},100);

【解决方案2】：

像魅力一样工作..

每一行 (tr) 都有自己的缓存变量

编辑一个输入时……它的初始值被缓存在它的父 tr 缓存变量中。如果编辑另一个输入，则第一个输入将恢复其原始值。

$(function(){
    // jQ 1.7 for on method
    $('table tr').data('bak',{$node:null, value:''}).on('dblclick', 'input[type="text"]', function(e){
        var $input = $(this),
            $tr = $input.closest('tr'),
            data = $tr.data('bak');
        // No input yet edited on this tr/line OR same
        if(! data.$node ){
            $input
                .toggleClass("active")                             
                .prop('readonly', false);
            $tr.data('bak',{$node:$input, value:$input.val()});                          
        } else if($input.attr('id') != data.$node.attr('id')){              
                data.$node
                    .toggleClass("active")
                    .prop('readonly', true);
                // restore initial value for the previous clicked input
                data.$node.val(data.value);
                // backup bak with the new input double clicked and it's value
                $input
                    .toggleClass("active")
                    .prop('readonly', false);
                $tr.data('bak',{$node:$input, value:$input.val()});
        }
        return false;
    });
});

【讨论】：

【解决方案3】：

我也是Jquery的初学者。您可以尝试将输入放入某个变量中，例如

var item = this.value;

在您的代码中，按钮在哪里？

【讨论】：

我试过了，但我无法确定元素何时停用。我尝试了$(this).attr('readonly',function(){!$(this).attr('readonly')}); 之类的方法，但没有像我想象的那样工作。

【解决方案4】：

不确定我是否完全理解您的问题。也许这样的功能应该满足您的需求：

function toggleReadonly(o, force) {
    if (force != undefined) { //Force state: true: readonly, false: modifiable
        if (force) o.attr('readonly', 'readonly');
        else o.removeAttr('readonly');
    } else { //Toggle current state
        if (o.attr('readonly') == undefined) o.attr('readonly', 'readonly');
        else o.removeAttr('readonly');
    }
}

//...
toggleReadonly($(this)); //simply toggle
toggleReadonly($(this), true); //set readonly
toggleReadonly($(this), false); //set modifiable

【讨论】：

感谢您的回复，但我正在切换数据替换并查找元素何时停用是我的问题。