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 值属性获取值。

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

属性部分永远不会更改，并且始终设置为HTML中定义的初始值，除非明确地操作。

当触发更改value属性更改但未HTML attribute值时。这就是导致问题发生的原因。

因此，如果您希望这样做，则需要设置value的attribute属性。

您可以使用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

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

1 个答案: