javascript - jQuery 星级 slider 过滤器

Question

我试图在 jquery 中制作一个星级评级 slider 文件管理器，但什么也没发生。

过滤器是:

<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 是:

<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();
        });
    }
});

如果您能帮我解决这个问题，请先致谢。

Answer 1

尝试改变

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

由

if (dStars != ui.value) 

DEMO

$("#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();
        });
    }
});