jquery - jquery 中文本更改时更改/交换文本框中的值

Question

场景:我有一系列带有唯一数字的文本框。如果我将文本框中的值更改为另一个值，则任何其他具有与该值相同的值的文本框的值都会交换。

下面的代码第一次适用于 2 个文本框，但当我尝试再次交换它们时则不起作用。

<input type="text" name="txtseq" id="txt1" value="6"></input><br>
<input type="text" name="txtseq" id="txt2" value="5"></input><br>
<input type="text" name="txtseq" id="txt3" value="4"></input><br>
<input type="text" name="txtseq" id="txt4" value="3"></input><br>
<input type="text" name="txtseq" id="txt5" value="2"></input><br>
<input type="text" name="txtseq" id="txt6" value="1"></input><br>
<input type="text" name="txtseq" id="txt7" value="7"></input><br>

var old = "";

$("document").ready(function () {
  $("input[type='text'][name*='txtseq']").focus(function(){
      old = $(this).val();
});

$("input[type='text'][name*='txtseq']").change(function () {       
    var vl = $(this).val();        
    if (vl != "" && parseInt(vl) > 0) {
        ChangeSeq(vl);
    } else {
        $(this).val(old);
        return;
    }
  });
});


function ChangeSeq(val) {   
  var v = $("input[type='text'][name*='txtseq'][value='" + val + "']");
  $(v).val(old);   
}

Find the code in JsFiddle here

Answer 1

第一个输入是帖子中评论的自关闭元素。

接下来，您将尝试根据 HTML value 属性 获取值。

元素的property 和attribute 之间存在细微差别。

属性部分永远不会改变，并且始终设置为 HTML 中定义的初始值，除非显式操作直到。

当触发更改时，value 属性会更改，但 HTML attribute 值不会更改。这就是您的情况出现问题的原因。

因此，如果您希望此功能正常工作，则需要设置 value 属性。

您可以使用属性以选择器开头直接选择输入。

代码

var old = "";


$("document").ready(function () {
    $inputs = $('[id^=txt]');
    $inputs.focus(function () {
        old = $(this).val();
    });

    $inputs.change(function () {
        var vl = $(this).val();
        if (vl != "" && parseInt(vl) > 0) {
            // Need to pass the current element as the 
            // attribute has to be set
            ChangeSeq(vl, this);
        } else {
            $(this).val(old);
            return;
        }
    });
});


function ChangeSeq(val, elem) {
    var v = $("input[type='text'][name*='txtseq'][value='" + val + "']");
    // Need to set the attribute property
    $(v).attr('value', old);
    // Need to set the value attribute of elem to val
    $(elem).attr('value', val);
}

<强> Check Fiddle