在 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 的属性，如果你想让它工作。

您可以使用attribute starts with selector 直接选择输入。

代码

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