Question

我想遍历所有输入元素并查找是否存在相同的值。

例如，当用户插入1（一）然后再次插入数字1（一）时，我想应用CSS来更改这两个相等值的输入元素的背景颜色，或者无论它们有多少也许。

如果用户尝试插入字母数字值，则JavaScript会处理代码并添加selected-wrong-input CSS类。

我希望该元素有setInterval 2秒钟，并从输入中取出字母数字值，以便用户能够再次插入数字。

我不介意提议的解决方案是使用JavaScript，jQuery还是两者兼而有之。

html代码：

<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">       
  <input id="posA100" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA101" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA102" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA103" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA104" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA105" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA106" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA107" type="text" class="input seat_box selected-wrong-input" onchange="bc.seatBoxHandleEvent(this)">
</div>

JavaScript代码。第一个是在html输入元素onchange

中调用的事件

bc.seatBoxHandleEvent = function (el) {
  bc.checkInput(el);

  var seatNumberFirstFloor = $('#dynamic-bus-builder-1');

  if (seatNumberFirstFloor && seatNumberFirstFloor.valueOf()) {
    var leftStreaming = (event.target.id);
    var rightStreaming = 'posB1' + leftStreaming.substring(5, 7);
    document.getElementById(rightStreaming).innerHTML = event.target.value;
  }
}

bc.checkInput = function (el) {

  let $el = $(el); 

  var targetValue = event.target.value;
  var id = event.target.id;
  var classOfInput = event.target.classList;

  if (targetValue !== 8 && targetValue !== 0 && (targetValue < 48 || targetValue > 57)) {
    console.log('valid number');
    console.log(classOfInput);
    $(el).toggleClass('selected');

  }
  else {
    console.log('invalid character');
    $(el).toggleClass('selected-wrong-input');
    //console.log(el.value);
  }

  var array = new Array(120);
  var existsValue = false;

  for(var i = 0; i <= array.length; i++) {
    console.log(el.value);
    console.log(i);
    if (el.value === array[i]) {
        console.log('hi');
        console.log(el.value);
        console.log(array[i]);

        var existsValue = true;
        console.log('existsValue');
        console.log('equal number forbidden');
        //break;
    }
  }

Answer 1

我建议使用IsNaN()函数检查输入是否为数字。此外，keyup事件更适合输入字段。

var inputList = [];
 $('.seat_box').keyup(function(elem){  
   if(IsNaN(elem.value)) return;  //input isn't numeric, add your functionality
   if (!valueExists(elem)) inputList.push(elem.value);
   else //dublicate value, add functionality   
 });

function valueExists(elem) {
  $(".seat_box").each(function(elem) {
    if ($.inArray(this.value, inputList) != -1) return true;
    else return false;
  });
}

搜索插入输入元素中的相等数字或字母数字值

1 个答案: