Question

我有两个带有jQuery的HTML5滑块，它们都有值，如果值是特定的数字，则打印一些文本。我使用的课程不是id，为什么一个人没有工作？

另外我有一个问题，如何检查两个滑块的值，而不是分开，如下所示： "if (value from 1st slider = 5 & value from 2nd slider = 8) then print some text. "

HTML

<html>
<head>
    <title></title>
</head>
<body>
    <meta charset="utf-8">
    <div class="wrapper">
        <div class="miles milesp"></div>
        <div class="weight-slider">
            <input class="slider-range" max="250" min="75" step="25" type="range" value=
            "75"> <span class="slider-value">0</span>
        </div><small>Rider Weight</small>
        <div class="incline-slider">
            <input class="slider-range" max="20" min="0" step="5" type="range" value=
            "0"> <span class="inc-slider-value">0</span>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js">
    </script> 
    </script>
</body>

的JavaScript

var rangeSlider = function() {
var slider = $('.weight-slider');
var sliderinc = $('.incline-slider')
var range = $('.slider-range');
var valuew = $('.slider-value');
var valueinc = $('.inc-slider-value')
var miles = $('.miles');
var milesp = $('.milesp');

slider.each(function() {
    valuew.each(function() {
        var valuew = $(this).prev().attr('value');
        $(this).html(valuew);
    });
    range.on('input', function() {
        if (this.value == 100) {
            $(milesp).html("<p>13 to 15</p>");
        } else if (this.value == 75) {
            $(milesp).html("<p>13 to 15</p>");
        } else if (this.value == 125) {
            $(milesp).html("<p>12 to 14</p>");
        } else if (this.value == 150) {
            $(milesp).html("<p>12 to 14</p>");
        } else if (this.value == 175) {
            $(milesp).html("<p>11 to 13</p>");
        } else if (this.value == 200) {
            $(milesp).html("<p>11 to 13</p>");
        } else if (this.value == 225) {
            $(milesp).html("<p>10 to 12</p>");
        } else if (this.value == 250) {
            $(milesp).html("<p>10 to 12</p>");
        } else {
            $(milesp).html("<p></p>");
        }
        $(this).next(valuew).html(this.value);
    });
});



sliderinc.each(function() {
    valueinc.each(function() {
        var valueinc = $(this).prev().attr('value');
        $(this).html(valueinc);
    });
    range.on('input', function() {
        if (this.value == 0) {
            $(miles).html("<p>13 to 15</p>");
        } else if (this.value == 5) {
            $(miles).html("<p>13 to 15</p>");
        } else if (this.value == 10) {
            $(miles).html("<p>12 to 14</p>");
        } else if (this.value == 15) {
            $(miles).html("<p>12 to 14</p>");
        } else if (this.value == 20) {
            $(miles).html("<p>11 to 13</p>");
        } else {
            $(miles).html("<p></p>");
        }
        $(this).next(valueinc).html(this.value);
    });
});
};
  rangeSlider();

2个HTML5范围的滑块不能和jQuery一起工作

0 个答案: