Question

我有5个文本输入，位置值来自（1-5）。我试图找到一种方法，只允许用户在文本字段中输入值1到5以获得所需的位置设置，但它必须具有所有值1-5

EXA：

| 1 | | 2 | | 3 | | 4 | | 5 |

如果用户将“2”更改为“5”，则结果应如下所示：

| 1 | | 5 | | 3 | | 4 | | 2 |

这将用于重新排序div的位置。

<input class='position' id='31' type='text' value='3'>
<input class='position' id='10' type='text' value='4'>
<input class='position' id='29' type='text' value='1'>
<input class='position' id='12' type='text' value='5'>
<input class='position' id='30' type='text' value='2'>

目前，我为每个输入都有一个更改函数，其中包含.each函数以检查重复值。每次输入更改都会触发一个ajax。

    $(".position").change(function(){

    var current_val = this.value;
    var current_id = this.id;


    $(".position").each(function() {

        if ( $(this).val() == current_val) {
        alert("duplicate");
        return false;
        }

    });

我不太清楚如何处理输入字段的值更改。

提前致谢！

Answer 1

您可以使用.focusin和数据属性来完成您想要执行的操作，如下所示：

页面加载时，将当前值保存到data-value
当焦点input时，将当前值保存到data-value
当input更改时，确定具有新值的输入并为其指定已更改的input旧值（交换）
您必须实施一些验证，以确保用户不会在[1,5]范围之外键入任何值。

以下是代码：

$(function() {
    $('.position').each(function() {
        $(this).data('value', this.value);
    })
    .on('focusin', function() {
        $(this).data('value', this.value);
    })
    .on('change', function() {
        var thisVal = this.value;
        $('.position').not(this).filter(function() {
            return this.value == thisVal;
        })
        .val( $(this).data('value') );
    });
});

$(function() {
    $('.position').each(function() {
        $(this).data('value', this.value);
    })
    .on('focusin', function() {
        $(this).data('value', this.value);
    })
    .on('change', function() {
        var thisVal = this.value;
        $('.position').not(this).filter(function() {
            return this.value == thisVal;
        })
        .val( $(this).data('value') );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class='position' id='31' type='text' value='3'>
<input class='position' id='10' type='text' value='4'>
<input class='position' id='29' type='text' value='1'>
<input class='position' id='12' type='text' value='5'>
<input class='position' id='30' type='text' value='2'>

用于使用文本输入字段定位div的Jquery验证

1 个答案: