Change $(this) input field color based on class effecting all classes in div

Question

I have this HTML that occurs multiple times on a page:

<div class="canteen-item">
    <div class="col-l">
        <h4>Chicken Sandwich</h4>
        <p>$<span class="canteen-price">3.50</span></p>
    </div>
    <div class="col-r">
        <div class="qty-days">
            <input name="Mon" class="qty-input" value="0" maxlength="2" />
            <input name="Tue" class="qty-input" value="0" maxlength="2" />
            <input name="Wed" class="qty-input" value="0" maxlength="2" />
            <input name="Thu" class="qty-input" value="0" maxlength="2" />
            <input name="Fri" class="qty-input" value="0" maxlength="2" />
        </div>
    </div>
</div>

I have this JQuery to detect when the input field is changed and if the value is greater than 0, change the color to red.

$(".qty-input").change(function(){
    var qty = parseInt($(this).val());
    if(qty > 0){
        $(this).css('color','red');
    }
    else{
        $(this).css('color','black');
    }
});

It is behaving very unpredictably. When I change the value of the first input field (Monday), it makes all 5 inputs red. Then sometimes it is changing the colors back to black in completely different rows sets of days. Seems like a simple problem to fix, but having trouble figuring it out.

Answer 1

The problem is that this code:

var qty = $(this).val();

Returns a string. And this code compares that string to a Number

if(qty > 0){

Try changing the first line of code to:

if ($(this).val()) {
    var qty = parseInt($(this).val(), 10);
}

And it should start to work more consistently but you will also want to validate that the input is all numbers.

Answer 2

Use change event target to get to the element

 $(document).ready(function() { $(".qty-input").change(function(e) { var target = e.target; var qty = $(target).val(); if (qty > 0) { $(target).css('color', 'red'); } else { $(target).css('color', 'black'); } alert("value is " + qty) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="canteen-item"> <div class="col-l"> <h4>Chicken Sandwich</h4> <p>$<span class="canteen-price">3.50</span> </p> </div> <div class="col-r"> <div class="qty-days"> <input type="text" name="Mon" class="qty-input" value="0" maxlength="2" /> <input type="text" name="Tue" class="qty-input" value="0" maxlength="2" /> <input type="text" name="Wed" class="qty-input" value="0" maxlength="2" /> <input type="text" name="Thu" class="qty-input" value="0" maxlength="2" /> <input type="text" name="Fri" class="qty-input" value="0" maxlength="2" /> </div> </div> </div> 

Answer 3

Thanks for all the responses. It prompted me to dig deeper at which point I discovered another piece of code in a different JS file that was trying (incorrectly!) to do the same thing. The code I have above is in fact sound and works perfectly. I apologize for wasting anyone's time here. I didn't realize that my client had a developer who had already attempted to do this (and who also put the code in the wrong file).