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>