jQuery星级滑块过滤器

jQuery star rating slider filter

本文关键字：过滤器 jQuery      更新时间：2023-11-16

我正试图在jquery中制作一个星级滑块过滤器，但什么都没发生。

过滤器为：

<div class="panel-collapse collapse filters-container" id="rating-filter">
    <div class="panel-content">
        <div class="five-stars-container editable-rating" data-label-fullrating="5 STELE" data-label-norating="Fara" data-label-rating="STELE" data-rating="1" id="rating"></div><span>TOATE</span>
    </div>
</div>

要过滤的分区是：

<div data-stars="2">2 STARS</div>
<div data-stars="2">2 STARS</div>
<div data-stars="4">5 STARS</div>
<div data-stars="3">3 STARS</div>
<div data-stars="1">1 STARS</div>

我的非工作jQuery代码是：

tjq("#rating").slider({
    range: "min",
    value: 4,
    min: 0,
    step: 1,
    max: 5,
    slide: function(event, ui) {
        var label_rating = '';
        if (ui.value == 0) {
            label_rating = tjq("#rating").data('label-norating');
        } else if (ui.value == 5) {
            label_rating = tjq("#rating").data('label-fullrating');
        } else {
            label_rating = ui.value + ' ' + tjq("#rating").data('label-rating');
        }
        tjq("#rating-filter .panel-content > span").text(label_rating);
        $('div[data-stars]').each(function() {
            var dStars = $(this).attr('data-stars');
            if (dStars < ui.values[0] || dStars > ui.values[1]) $(this).hide();
            else $(this).show();
        });
    }
});

如果你能帮我解决这个问题，提前谢谢。

尝试更改

if (dStars < ui.values[0] || dStars > ui.values[1])

通过

if (dStars != ui.value)

演示

$("#rating").slider({
    range: "min",
    value: 4,
    min: 0,
    step: 1,
    max: 5,
    slide: function(event, ui) {
        var label_rating = '';
        if (ui.value == 0) {
            label_rating = $("#rating").data('label-norating');
        } else if (ui.value == 5) {
            label_rating = $("#rating").data('label-fullrating');
        } else {
            label_rating = ui.value + ' ' + $("#rating").data('label-rating');
        }
        $("#rating-filter .panel-content > span").text(label_rating);
        $('div[data-stars]').each(function() {
            var dStars = $(this).attr('data-stars');
            if (dStars != ui.value) 
               $(this).hide();
            else 
               $(this).show();
        });
    }
});
相关文章：