javascript - 使用 HTML slider 更改按钮的链接

Question

我有一个非常基本的 slider

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    output.innerHTML = this.value;
}

.slider {
		    -webkit-appearance: none;  /* Override default CSS styles */
		    appearance: none;
		    width: 100%; /* Full-width */
		    height: 25px; /* Specified height */
		    background: #ffffff; /* 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 */
		.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) */ 
		.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 */
		}

		.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 */
		}

<div id="slidecontainer">
  <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange">
</div>

<a href="#" class ="button style3">Go</a>

我试图让这个 slider 更改按钮中的链接，但我不知道如何去做。我不太擅长 javascript，但是如果你给我一些想法，我相信我可以做到。我的最终目标是让该 slider 根据 slider 的位置更改按钮内的链接。

Answer 1

我想到的最简单的想法是，定义例如

var a100 = "www.cr8code.co";
var a200 = "www.google.com";

然后获取 slider 的值；

$('.slider').change(function(){
var y = $('.slider').val();
y = 'a'+y;
$('button').attr('href',eval(y));
});

它将获取 exmaple 的 slider 值，如果值为 100，则链接将为“cr8code.co”，如果值为 200，链接将为“google.com” 顺便说一句，我想按钮是 <a>如果是 <button> 则标记为其他类型逻辑是相同的，但你要更改代码。