Question

我有几个通过javascript动态生成的“星标”，它们形成了这个ul列表

                                <ul class="star-banner-mini">
                                    <li class="star-mini" data-num="0"></li>
                                    <li class="star-mini" data-num="1"></li>
                                    <li class="star-mini" data-num="2"></li>
                                    <li class="star-mini" data-num="3"></li>
                                    <li class="star-mini" data-num="4"></li>
                                </ul>

我在同一页面上有几个这样的star-banner-mini，并希望单独定位它们。这是JS代码：

$('.star-banner-mini').each(function(){

    $(this).on('click', '.star-mini', function(){

        console.log('detect click');
        var star_li = $('.star-banner-mini').find('.star-mini');
        var iteration = $(this).data('num')+1;

        star_li.removeClass('selected');
        for(var i=0;i<iteration;i++){
            star_li.eq(i).addClass('selected'); 
        }
    });
});

我不知道当我点击每颗星星时"detect click"从未打印过，star-mini。

Answer 1

尝试：

$(document).on('click', '.star-banner-mini .star-mini', function(){

    console.log('detect click');
    var star_li = $('.star-banner-mini').find('.star-mini');
    var iteration = $(this).data('num')+1;

    star_li.removeClass('selected');
    for(var i=0;i<iteration;i++){
        star_li.eq(i).addClass('selected'); 
    }
});

我认为你在每个循环内部尝试我们的方式导致了问题。使用on而不是仅仅绑定一个点击是因为它不需要绑定到它影响的每个元素，而是整个文档。你仍然需要清理函数内部的代码，因为我不知道它的目的是什么。

Answer 2

如果动态生成列表，则应使用.on（）的委托事件处理程序语法：

尝试：

$(document).on('click', '.star-mini', function(){
    console.log('detect click');
    var iteration = $(this).data('num')+1;
    $(this).parent().find('li').removeClass('selected');
    for(var i=0;i<iteration;i++){
        $(this).parent().find('li').eq(i).addClass('selected'); 
    }
});

<强> jsFiddle example

在同一页面中定位多个星级

2 个答案: