javascript - 2个 slider 输入组合

标签 javascript html css

我正在尝试获取两个 slider 输入的值，以便更改 slider 上方的图像。例如，如果 slider 1 的值为 10， slider 2 的值为 80，它将改变图像。

我已经成功地用一个 slider 完成了这个，但是当尝试使用两个 slider 时它似乎搞砸了。下面是一个 slider 解决方案的代码。

P.s 我从链接上的 w3school 获取了 slider 。 https://www.w3schools.com/howto/howto_js_rangeslider.asp

感谢阅读，

var fatslider = document.getElementById("myRange1");
    var fatoutput = document.getElementById("demo1");
    fatoutput.innerHTML = fatslider.value; // Display the default slider value

    // Update the current slider value (each time you drag the slider handle)

    fatslider.oninput = function() {
        fatoutput.innerHTML = this.value;
        if(this.value == 0){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat01muscle01.png";;
        } else if(this.value == 5){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat02muscle01.png";;
        } else if(this.value == 10){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat03muscle01.png";;
        } else if(this.value == 15){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat04muscle01.png";;
        } else if(this.value == 20){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat05muscle01.png";;
        } else if(this.value == 25){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat06muscle01.png";;
        } else if(this.value == 30){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat08muscle01.png";;
        } else if(this.value == 35){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat09muscle01.png";;
        } else if(this.value == 40){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat10muscle01.png";;
        } else if(this.value == 45){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat11muscle01.png";;
        } else if(this.value == 50){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat12muscle01.png";;
        } else if(this.value == 55){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat13muscle01.png";;
        } else if(this.value == 60){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat14muscle01.png";;
        } else if(this.value == 65){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat15muscle01.png";;
        } else if(this.value == 70){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat16muscle01.png";;
        } else if(this.value == 75){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat17muscle01.png";;
        } else if(this.value == 80){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat18muscle01.png";;
        } else if(this.value == 85){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat19muscle01.png";;
        } else if(this.value == 90){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat20muscle01.png";;
        } else if(this.value == 95){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat21muscle01.png";;
        } else if(this.value == 100){
            document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat22muscle01.png";;
        } 
    }
.fat-slidecontainer {
width: 100%; /* Width of the outside container */
}

/* The slider itself */
.fat-slider {
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}

/* Mouse-over effects */
.fat-slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- 
(Firefox) to override default look) */ 
.fat-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}

.fat-slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.fat-slidecontainer {
width: 100%; /* Width of the outside container */
}

/* The slider itself */
.muscle-slider {
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}

/* Mouse-over effects */
.muscle-slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- 
(Firefox) to override default look) */ 
.muscle-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}

.muscle-slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
<center>
 <img src="images/bodytype/fat10muscle01.png" id="quiz-q1-current-bodytype-image">
<p>Select Fat Level</p>
<div class="fat-slidecontainer">
    <input type="range" min="1" max="100" value="50" class="fat-slider" id="myRange1">
    <p>Value: <span id="demo1"></span></p>
</div>

最佳答案

首先，您需要确保您的值(value)观与您的期望一致。由于您的代码旨在支持 5、10、15、20、25、30、35、40、45、50、55、60、65、70、75、80、85、90、95、100 的值。按顺序为此，最小值需要为 5，最大值需要为 100，步长需要为 5:

<center>
 <img src="images/bodytype/fat10muscle01.png" id="quiz-q1-current-bodytype-image">
<p>Select Fat Level</p>
<div class="fat-slidecontainer">
    <input type="range" min="5" max="100" value="50" class="fat-slider" id="myRange1" step="5">
    <p>Value: <span id="demo1"></span></p>
</div>
<p>Select Muscle Level</p>
<div class="muscle-slidecontainer">
    <input type="range" min="5" max="100" value="50" class="muscle-slider" id="myRange2" step="5">
    <p>Value: <span id="demo2"></span></p>
</div>
</center>

现在，让我们修复 Javascript:

var fatslider = document.getElementById("myRange1");
    var fatoutput = document.getElementById("demo1");
    fatoutput.innerHTML = fatslider.value; // Display the default slider value

    var muscleslider = document.getElementById("myRange2");
    var muscleoutput = document.getElementById("demo2");
    muscleoutput.innerHTML = muscleslider.value; // Display the default slider value

var mapSliderToPicture = {
    "0": "01",
    "5": "01",
    "10": "02",
    "15": "03",
    "20": "04",
    "25": "05",
    "30": "06",
    "35": "07",
    "40": "08",
    "45": "09",
    "50": "10",
    "55": "11",
    "60": "12",
    "65": "13",
    "70": "14",
    "75": "15",
    "80": "16",
    "85": "17",
    "90": "18",
    "95": "19",
    "100": "20",
};

function updateImage(fat, muscle) {
    console.log(document.getElementById("quiz-q1-current-bodytype-image").src = `images/bodytype/fat${mapSliderToPicture[fat]}muscle${mapSliderToPicture[muscle]}.png`);
}

muscleslider.oninput = function() {
    updateImage(parseInt(document.getElementById("myRange1").value), parseInt(muscleoutput.innerHTML = this.value));
}

fatslider.oninput = function() {
    updateImage(parseInt(fatoutput.innerHTML = this.value), parseInt(document.getElementById("myRange2").value));
}

要点解释:

  • 我保留了你的对象的定义
  • 我在预期输入值和它们的匹配项之间创建了一个映射
  • 我创建了一个更新图像的函数，为了代码清晰，使用文字模板，请注意，这里只计算图片位置中的数字(抱歉关于 console.log，示例中的图片已损坏，使其成为难以测试)
  • 我为调用相同函数并传递正确参数的两个 slider 创建了 oninput 事件

JSFiddle:https://jsfiddle.net/0cb6hmfs/1/

关于javascript - 2个 slider 输入组合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56201769/

上一篇：html - 如何将下 zipper 接添加到现有的响应式导航菜单

下一篇：javascript - Node Js、javascript、mysql，客户端看到/看不到什么？

相关文章：

html - CSS 附加尺寸

html - <pre> 标签不会显示包含 &lt;iframe&gt; 的文本

javascript - 粒子 JS 问题

google-chrome - 其他元素之上的 Webkit box-shadow gitches

jquery - 如何在 Bootstrap 中有一个固定的列？

javascript - 更改模块名称大小写时，Webpack 使 bundle 无效

javascript - Firebase AngularFire $保存不需要的结果

javascript - 有没有办法判断 ES6 promise 是否已履行/拒绝/解决？

javascript - fullpage.js jQuery UI 元素

html - 如何创建没有左右边框的列表 HTML CSS

©2024 IT工具网  联系我们