jquery - Select element with same class and other class -
consider html:
totaal: <input type="text" class="herd_buy total" name="herd_buy_total" /><br /> per animal: <input type="text" class="herd_buy peranimal" name="herd_buy_per_animal" /><br />
if user fills in total, should calculate per animal price, , other way around.
the script should dynamic, since have more rows total/per animal properties.
so started function. figured use class, , if selected element has class total
, select peranimal
class. got stuck...
$(".herd_weight, .herd_buy").on('keyup', function() { var numanimals = $("[name=herd_num_begin]").val(); if( $(this).hasclass('total') ) { var s = $(this).attr('class'); $( "."+s+".peranimal" ).not(this).css('background-color', 'yellow'); } else if( $(this).hasclass('peranimal') ) { var s = $(this).attr('class'); $( "."+s+".total" ).not(this).css('background-color', 'yellow'); } });
i figured $(this).attr('class')
gives me herd_buy total
, makes selector .herd_buy total .peranimal
... wrong.
how can select right element?
i suggest put every row separate container (if didn't yet) this
<div> total: <input type="text" class="herd_buy total" name="herd_buy_total" /><br /> per animal: <input type="text" class="herd_buy peranimal" name="herd_buy_per_animal" /><br /> </div> <div> total: <input type="text" class="herd_buy total" name="herd_buy_total" /><br /> per animal: <input type="text" class="herd_buy peranimal" name="herd_buy_per_animal" /><br /> </div>
and in case can use next script
$(document).ready(function() { $(".herd_weight, .herd_buy").on('keyup', function() { var numanimals = $("[name='herd_num_begin']").val(); if( $(this).is('.total') ) { $('.peranimal', $(this).parent()).css({ 'background-color': 'yellow' }) } else if( $(this).is('.peranimal') ) { $('.total', $(this).parent()).css({ 'background-color': 'yellow' }) } }); });
js fiddle example here
Comments
Post a Comment