javascript - 使用 jQuery 时，类型范围在 IE11 中不起作用

Question

我的页面上有 3 个类似的类型范围滑块，可在 Chrome、Opera 和 Firefox 等浏览器中使用。但是当我尝试在 IE11 及以下或 Edge 中使用滑块时，它不想滑动。

HTML：

<div class="filterItem">
    <section id="preperation" class="range-slider">
        <p class="sliderText">Preperation Time (minutes)</p>
        <span class="rangeValues"></span>

        <inputclass="minSlider" value="0" min="0" max="61" step="1" type="range" 
        onchange="filter()">

        <inputclass="maxSlider" value="61" min="0" max="61" step="1" type="range" 
        onchange="filter()">

    </section>
</div>

jQuery：

function getVals() {
    // Get slider values
    console.log("values")
    var parent = this.parentNode;
    var slides = parent.getElementsByTagName("input");
    var slide1 = parseFloat(slides[0].value);
    var slide2 = parseFloat(slides[1].value);
    // Neither slider will clip the other, so make sure we determine which is larger
    if (slide1 > slide2) {
        var tmp = slide2;
        slide2 = slide1;
        slide1 = tmp;
    }
    var slider = parent.getElementsByClassName('sliderText')[0].innerHTML;
    var displayElement = parent.getElementsByClassName("rangeValues")[0];
    var max = 0
    if (slider == 'Preperation Time (minutes)') {
        max = 60;
    } else if (slider == 'Cooking Time (minutes)') {
        max = 90;
    } else {
        max = 99999999
    }
    if (slide2 > max) {
        slide2 = String(max) + '+';
    }
    displayElement.innerHTML = slide1 + " - " + slide2;
}

这是在 onload 中加载滑块的更多 jQuery。

window.onload = function() {

    // Set the sliders for the current values in the URL
    if (location.search) {
        var urlParams = new URLSearchParams(window.location.search);
        var entries = urlParams.entries();
        for (pair of entries) {
            if (pair[0] == 'q') {
                document.querySelector('input#searchBarMain').value = pair[1]
                document.querySelector('input#filterSearch').value = pair[1]
            }
            if (pair[0] == 'min_cook_time') {
                document.querySelector('#cooking>input.minSlider').value = pair[1]
            }
            if (pair[0] == 'max_cook_time') {
                document.querySelector('#cooking>input.maxSlider').value = pair[1]
            }
            if (pair[0] == 'min_prep_time') {
                document.querySelector('#preperation>input.minSlider').value = pair[1]
            }
            if (pair[0] == 'max_prep_time') {
                document.querySelector('#preperation>input.maxSlider').value = pair[1]
            }
            if (pair[0] == 'min_servings') {
                document.querySelector('#servings>input.minSlider').value = pair[1]
            }
            if (pair[0] == 'max_servings') {
                document.querySelector('#servings>input.maxSlider').value = pair[1]
            }
        }
    }
    // Initialize Sliders
    var sliderSections = document.getElementsByClassName("range-slider");
    for (var x = 0; x < sliderSections.length; x++) {
        var sliders = sliderSections[x].getElementsByTagName("input");
        for (var y = 0; y < sliders.length; y++) {
            if (sliders[y].type === "range") {
                sliders[y].oninput = getVals;
                // Manually trigger event first time to display values
                sliders[y].oninput();
            }

        }
    }
}

已尝试查看 Stack Overflow 上的其他类似问题，但它们不起作用。

标签： javascriptjqueryhtml