突出显示具有相同值的输入字段

I have some input fields:

我有一些输入字段:

<input type="text" id="original" name="itens[]">
<input type="text" id="clone1" name="itens[]">
<input type="text" id="clone2" name="itens[]">
<input type="text" id="clone3" name="itens[]">

I want them to change color if their values repeat. Basically a loop within a loop. Like this:

如果他们的值重复,我希望他们改变颜色。基本上是循环内的循环。像这样:

$('input[name="itens\\[\\]"]').each(function () {
    current_value = $(this).val();
    current_id = $(this).attr("id");
    $('input[name="itens\\[\\]"]').each(function () {
        if ($(this).val() == current_value && $(this).attr("id") != current_id) {
            $(this).css("background", "red");
        } else {
            $(this).css("background", "white");
        }
    });
});

That's producing erratic behavior that even loggin a lot to the console I don't seem able to understand. Sometimes it works, sometimes it doesn't. I think the comparision is failing maybe because of types. Could really use some help.

这产生了不稳定的行为,即使登录很多我也似乎无法理解的控制台。有时它有效,有时则不然。我认为比较失败可能是因为类型。真的可以使用一些帮助。

3 个解决方案

#1

I think what happens is that although you have the matching logic working and it does apply the background color, if it then does a comparison where it doesn't match with the next input, it removes the previously correct match. So what i've done here is broken up the if else and applied a white background to all after every blur event. Now when it finds a match it will only add color, not remove.

我认为发生的情况是,虽然你有匹配的逻辑工作,但它确实应用了背景颜色,如果它然后进行比较,它与下一个输入不匹配,它会删除以前正确的匹配。所以我在这里所做的就是打破if else并在每次模糊事件后都应用白色背景。现在当它找到匹配时,它只会添加颜色,而不是删除。

$('input[name="itens\\[\\]"]').blur(function() {
  $('input[name="itens\\[\\]"]').css("background", "white");
  $('input[name="itens\\[\\]"]').each(function() {
    current_value = $(this).val();
    current_id = $(this).attr("id");
    $('input[name="itens\\[\\]"]').each(function() {
      if ($(this).val() == current_value && $(this).attr("id") != current_id) {
        $(this).css("background", "red");
      }
    });
  });
});

http://codepen.io/partypete25/pen/WwLZmO?editors=1010

#2

You can reference my code:

你可以参考我的代码:

$("input[name='itens[]']").change(function(){
    var data_array = [];
    $("input[name='itens[]']").each(function () {
        if($(this).val() != "" && $.inArray($(this).val(), data_array) != -1) {
        $(this).css("background", "red");
      } else {
        $(this).css("background", "white");
      }
      if ($(this).val() != "")
          data_array.push($(this).val());
  });
});

jsfiddle

#3

you need to check the input values if exist or not in old value. try this below code :

如果存在或不存在旧值,则需要检查输入值。试试以下代码:

  <input type="text" id="original" name="itens[]" value="2">
<input type="text" id="clone1" name="itens[]" value="2">
<input type="text" id="clone2" name="itens[]" value="1">
<input type="text" id="clone3" name="itens[]" value="3">

  <script>
   var inputValues =[] , repeatValues =[];

$('input[name="itens\\[\\]"]').each(function () {
    inputValues.push($(this).val());
 })
 inputValues = inputValues.sort();
  for(var count =0 ; count < inputValues.length; count++){
        if(inputValues[count + 1] == inputValues[count])
            repeatValues.push(inputValues[count])
  }
    $('input[name="itens\\[\\]"]').each(function () {
        if ($.inArray($(this).val(),repeatValues) != -1) {
            $(this).css("background", "red");
        } else {
            $(this).css("background", "white");
        }
    });

https://jsfiddle.net/8rbkf75t/1/