3

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

下面的代码第一次适用于 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);   
}

在此处找到 JsFiddle 中的代码

4

1 回答 1

2

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

接下来，您将尝试根据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);
}

检查小提琴

于 2013-08-10T21:43:22.467 回答