Question

我正在尝试通过范围输入（以及其他控件）来过滤元素集合。范围输入包含一个最小值/最大值，并且应过滤超出该范围的元素。我无法将其与patrickkunka's demo filter-by-range中的建议代码一起使用。我在做错什么吗？

我在javascript中没有任何错误。我在控制台上记录了所有功能，唯一不会在输入更改时运行的功能是filterTestResult（）。

控件（引导程序滑块）：

<li class="col-12">
       <label for="customRange3">1 to 5</label>
       <input type="text" class="level-range"
              data-filtertype="level"
              data-provide="slider"
              data-slider-ticks="[1, 2, 3, 4, 5]"
              data-slider-ticks-labels='["1", "2", "3", "4", "5"]'
              data-slider-min="1"
              data-slider-max="5"
              data-slider-step="1"
              data-slider-value="[2,3]"
              data-slider-tooltip="hide"
       >
</li>

JavaScript：

    var mixer = mixitup('#mixContainer', {
        multifilter: {
            enable: true
        },
        animation: {
            duration: 250,
            nudge: true,
            reverseOut: false,
            effects: "fade translateZ(-100px) stagger(30ms)"
        }
    }); 

    $(".filterbox .level-range").on("change", function(){
        console.log('change runs');
        handleRangeInputChange();
    });

    function handleRangeInputChange() {
        console.log('handleInput runs');
        mixer.filter(mixer.getState().activeFilter);
    }

    function filterTestResult(testResult, target) {
        console.log('filterTestResult runs');
        var slidervalue = $(".level-range").val();
        var sliderArr = slidervalue.split(',');

        var num1 = parseInt(sliderArr[0]);
        var num2 = parseInt(sliderArr[1]);

        var size = Number(target.dom.el.getAttribute('data-level'));
        var range = getRange();

        if (size < num1 || size > num2) {
            testResult = false;
        }

        return testResult;
    }

    $(function(){
        handleRangeInputChange();
        mixitup.Mixer.registerFilter('testResultEvaluateHideShow', 'range', filterTestResult);  
    });

混合元素示例：

<a href="custom-url/" class="mix col-12 bg-white available" data-level="3" data-available="1" data-guaranteed="1" data-activity="xp-59"  title="Read more">
    .....
</a>

如何通过范围输入来制作Mixitup寄存器和过滤器

0 个答案: