Question

如果元素没有hover

，我会在元素上使用click和'disabled'个事件

$('.stars').each(function () {
    var rating = $(this).parent().parent().find('#rating-input').val(),
        $stars = $(this).children();

    if (rating > 0) {
        $stars.filter(':lt(' + rating + ')').addClass('selected');
    }
    if (!$(this).hasClass('disabled')) {
        $stars.hover(function() {
            var idx = $(this).index();
            $stars.removeClass('selected').slice(0, idx + 1).addClass('selected');
        }, function() {
            var rating = $(this).parent().parent().find('#rating-input').val();
            $stars.removeClass('selected').slice(0, rating).addClass('selected');
        }).click(function() {
            var rating = ($(this).index() + 1);
            $(this).parent().parent().find('#rating-input').val(rating);
        });
    } 
});

但课程＆＃39;禁用＆＃39;我是动态添加的，因此hover和click即使在课程“禁用”后也能继续工作。加入。如何使它动态添加类？

Answer 1

由于动态添加了类，因此条件检查也应该动态发生。

在这种情况下，一种选择是使用事件委托，但在这种情况下，我认为检查事件处理程序中的条件会更容易

$('.stars').each(function () {
    var rating = $(this).parent().parent().find('#rating-input').val(),
        $stars = $(this).children();

    if (rating > 0) {
        $stars.filter(':lt(' + rating + ')').addClass('selected');
    }
    $stars.hover(function () {
        if ($(this).hasClass('disabled')) {
            return 
        }
        var idx = $(this).index();
        $stars.removeClass('selected').slice(0, idx + 1).addClass('selected');
    }, function () {
        if ($(this).hasClass('disabled')) {
            return 
        }
        var rating = $(this).parent().parent().find('#rating-input').val();
        $stars.removeClass('selected').slice(0, rating).addClass('selected');
    }).click(function () {
        if ($(this).hasClass('disabled')) {
            return 
        }
        var rating = ($(this).index() + 1);
        $(this).parent().parent().find('#rating-input').val(rating);
    });
});

悬停在动态添加类的元素上

1 个答案: