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，我选择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

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

1 个答案: