Jquery：获取索引小于当前点击星的星

Question

我有一个带有星星的 div：

<aside class="rate review-rate">
                <span class="review-star" index="1">☆</span>
                <span class="review-star" index="2">☆</span>
                <span class="review-star" index="3">☆</span>
                <span class="review-star" index="4">☆</span>
                <span class="review-star" index="5">☆</span>
            </aside>

和一个脚本，当它被点击时使星星充满：

$('.review-star').on('click', function () {
   /* desc = $(this).attr('data-desc'); //get the description
    $('#content').text(desc);*/
    alert("yes");
    alert($(this).attr("index"));
    $(this).text("★")

    var stars = $(".review-star").filter((index, el) => {
        return parseInt($(el).attr("index")) > $(this).attr("index");
    });
    console.log(stars);
    console.log(stars.length)
    for (var starsKey in stars) {
        //$(starsKey).text("★");
    //    console.log(starsKey);
    }
});

但是，我还需要使以前的星星充满。 我尝试获取属性index值小于$(this).attr("index")的所有星星，但它没有用。

编辑： prevAll的答案很棒，但如果有人能指出我在代码中做错了什么，将不胜感激！

Answer 1

要达到您的要求，您可以简单地使用prevAll()方法。 addBack()也可以用来包含被点击的元素。 尝试这个：

 $('.review-star').on('click', function() { $(this).prevAll().addBack().text("★"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <aside class="rate review-rate"> <span class="review-star" index="1">☆</span> <span class="review-star" index="2">☆</span> <span class="review-star" index="3">☆</span> <span class="review-star" index="4">☆</span> <span class="review-star" index="5">☆</span> </aside>

Answer 2

您可以尝试使用prevAll()和nextAll()

 $('.review-star').on('click', function () { /* desc = $(this).attr('data-desc'); //get the description $('#content').text(desc);*/ //alert("yes"); //alert($(this).attr("index")); $(this).text("★") //var stars = $(".review-star").filter((index, el) => { // return parseInt($(el).attr("index")) > $(this).attr("index"); //}); //console.log(stars); //console.log(stars.length) $(this).prevAll().text("★"); $(this).nextAll().text("☆"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <aside class="rate review-rate"> <span class="review-star" index="1">☆</span> <span class="review-star" index="2">☆</span> <span class="review-star" index="3">☆</span> <span class="review-star" index="4">☆</span> <span class="review-star" index="5">☆</span> </aside>