如何在元素上插入值時切換輸入元素的類

Question

我在輸入html元素上有一個javascript處理程序。輸入的HTML元素可能很多..關鍵是每當我在輸入html元素上插入一個值時我想在該元素上添加一個類，以便更改具有值的輸入的背景顏色。現在我在做：** $（'this.seat_box'）。toggleClass（'selected'）; ********但是這會影響所有擁有該類的元素。有沒有辦法在輸入元素的處理函數上傳遞一個參數，以某種方式引用？我試圖通過爭論或類似的說法： 的onchange =「bc.seatBoxHandleEvent（‘輸入’，這一點），沒有這些工作......

任何幫助表示讚賞

的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功能

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'); 
 
} 
 
}

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

 
.selected { 
 
    background-color: red; 
 
}

<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>

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>