Question

我有一个非常基本的滑块

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>

我试图让这个滑块更改按钮中的链接，但我不知道如何去做。我不是很擅长javascript，但如果你给我的想法，我相信我可以管理。我的最终目标是让此滑块根据滑块的位置更改按钮内的链接。

Answer 1

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

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

然后获取滑块的值，如;

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

如果值为100，它将为exmaple滑块的值，如果值200链接将为“google.com”，则链接将为“cr8code.co” 顺便说一下，我认为按钮是<a>标签，如果它是<button>逻辑相同但你要改变代码。

使用HTML滑块更改按钮的链接

1 个答案: