Question

我在输入html元素上有一个javascript处理程序。输入html元素可能很多..重点是每当我在输入html元素上插入一个值时，我想在该元素上添加一个类，以便更改具有值的输入的背景颜色。现在我正在做：** $（＆＃39; this.seat_box＆＃39;）。toggleClass（＆＃39;选择＆＃39;）; ********但这会影响所有的元素有班级。有没有办法在输入元素中的处理函数传递一个参数，以某种方式引用它？我试图传递参数或参数，如： onchange =＆＃34; bc.seatBoxHandleEvent（＆＃39;输入＆＃39;，这个），这些都没有...

任何帮助表示赞赏。！

Html代码：

<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">
  <input id="posA100" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
  <input id="posA101" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
</div>

我有以下javascript验证代码：

bc.seatBoxHandleEvent = function () {
  bc.checkInput();
  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 () {
  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);
    **$('this.seat_box').toggleClass('selected');********
  }
  else {
    console.log('invalid character');
  }
}

Answer 1

将元素从HTML传递给函数。

＆＃13;

bc = [];
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);

 }
}

bc.checkInput = function (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');
 }
}

＆＃13;

div.class1 {
    border: 1px solid #000;
    padding: 10px;
    background-color: #FFCC00;
}

.selected {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">
 <input id="posA100" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent(this)">
 <input id="posA101" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent(this)">
</div>

＆＃13;

Answer 2

我刚刚将bc重写为一个对象，语法与之相同。但这一个有效。请记住，onchange事件仅在模糊时触发。因此，如果您希望在输入值时触发事件，请改为使用onkeypress事件。

JS

var BC = function () {
  this.seatBoxHandleEvent = function () {

    var checkInput = function () {

      var targetValue = event.target.value;
      var id = '#' + event.target.id;

      if (targetValue !== 8 && targetValue !== 0 && (targetValue < 48 || targetValue > 57)) {
        console.log('valid number');
        console.log(event.target.classList); // [seat-box] set on the event.target
        $(id).toggleClass('selected');
        console.log(event.target.classList); // [seat-box, selected] set on the event.target
      }
      else {
        console.log('invalid character');
      }
    };

    checkInput();
  };
};

this.bc = new BC();

HTML

<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">
  <input id="posA100" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
  <input id="posA101" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
</div>

如何在该元素上插入值时切换输入元素的类

2 个答案: