选择具有相同类和其他类的元素

Question

考虑一下这个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 />

如果用户填写了总数，它应该计算每只动物的价格，反之亦然。

脚本应该是动态的，因为我有更多的行，其中有total/per动物属性。

所以我启动了一个函数。我想我应该使用这个类，如果所选元素有total类，我就选择peranimal类。但是我被卡住了。

$(".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');
    }
});

我认为$(this).attr('class')给了我herd_buy total，所以我的选择器是.herd_buy total .peranimal...这显然是错误的。

如何选择正确的元素？

Answer 1

我建议将每一行放到单独的容器中(如果您还没有这样做的话)，如下所示

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

在这种情况下，您可以使用下一个脚本

$(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小提琴示例here