値がその要素に挿入されたときに入力要素のクラスを切り替える方法

Question

入力html要素にjavascriptハンドラがあります。入力html要素は多くの場合があります。ポイントは、入力html要素に値を挿入するたびに、値を持つ入力の背景色を変更するために、その要素にクラスを追加したいと考えています。今、私はやっています：** $（ 'this.seat_box'）。toggleClass（ 'selected'）; ********しかし、これはクラスを持つすべての要素に影響します。何とかこれを参照しているinput要素のハンドラ関数の引数を渡す方法はありますか？

すべてのヘルプは感謝... の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

私はちょうどその代わり、構文はそれとは別に同じであるオブジェクトに紀元前書き直しました。しかし、これは動作します。 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 this`がキーワードである `ので

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