Question

我有一个滑块，滑块输出一个500到1600之间的值，步长为100.我还有一个“开始”按钮，我希望Go按钮中的链接根据值改变滑块显示。这是我的代码。

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;
}

#slidecontainer {
  width: 50%;
  /* Width of the outside container */
  margin-left: auto !important;
  margin-right: auto !important;
}


/* The slider itself */

.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 */
}

<section id="banner">
  <header>
    <h2>Choose Budget</h2>
  </header>
  <div id="slidecontainer">
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange">
  </div>


  <ul class="Slider">
    <li>
      <p>Price Point: $<span id="demo"></span></p>
    </li>
    <br>
    <a href="#" class="button style3">Go</a>
    <br>
  </ul>

</section>

现在，我已经输出了一个值“demo”。我现在想要每个值，与链接相关联，并将该链接放在“go”按钮内。谢谢你的阅读。（另外，我对javascript非常新，所以请尝试解释一下，好像我4岁了。

Answer 1

您可能会更改演示的值，但您更改属性 href 而不是html内容。

假设您有一个链接，您可以尝试使用if else这样的每个值：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var link = document.getElementById("link");
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;
  if(this.value==500)
    link.setAttribute('href','link1');
  else if(this.value==600)
    link.setAttribute('href','link2');
  else
    link.setAttribute('href','link3');
  /* you do the same for the other values */
}

<section id="banner">
  <header>
    <h2>Choose Budget</h2>
  </header>
  <div id="slidecontainer">
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange">
  </div>


  <ul class="Slider">
    <li>
      <p>Price Point: $<span id="demo"></span></p>
    </li>
    <br>
    <a href="#" class="button style3" id="link">Go</a>
    <br>
  </ul>

</section>

或者您可以考虑使用存储所有链接的对象

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var link = document.getElementById("link");
output.innerHTML = slider.value; // Display the default slider value

const links = {500: "link1", 600: "link3",700: "link4",800: "link2"};

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  link.setAttribute('href',links[this.value]);
}

<section id="banner">
  <header>
    <h2>Choose Budget</h2>
  </header>
  <div id="slidecontainer">
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange">
  </div>


  <ul class="Slider">
    <li>
      <p>Price Point: $<span id="demo"></span></p>
    </li>
    <br>
    <a href="#" class="button style3" id="link">Go</a>
    <br>
  </ul>

</section>

Answer 2

有两种可能性： 1）动态更改链接href。为此，链接需要有一个id：

<a href = "http://example.com/500.html" id="go" > GO </a>

所以现在我们可以在js中找到该链接：

const go = document.getElementById("go");

每当输入发生变化时，我们不仅会更新输出，还会更新链接：

slider.oninput = function() {
  output.innerHTML = this.value;
  go.href = `http://example.com/${this.value}.html`;
}

2）单击链接时获取滑块值。为此，链接不需要是链接，而是一个按钮：

<button id = "go" > GO </button>

所以当点击那些时，我们可以重定向到包含滑块值的网址：

document.getElementById("go")
  .onclick = e => 
     location.href = `http://example.com/${slider.value}.html`;

您可能想要查找的内容：

const：var

的酷炫新版本

${...}：模板文字，基本上是一种将代码嵌入字符串的方法

=>：这是一个箭头功能（它们的工作方式与function完全相同，但我认为它们更具可读性）

Answer 3

正如您所说，您已在this.value输出值output.innerHTML。同样，您可以找到自己的链接并更改其href。

有两种方法可以找到您的链接（其中包括）：

使用document.querySelector("a.button.style3")或类似的选择器
或为该链接指定ID（例如<a id="goButton" href="#" class="button style3">Go</a>），然后使用document.getElementById("goButton")。

然后，要更改其href，您可以

设置其href属性：document.getElementById("goButton").setAttribute("href", this.value + ".html")，
或其href属性：`document.getElementById（＆＃34; goButton＆＃34;）。href = this.value +＆＃34; .html＆＃34;。

完整代码可能如下所示：

slider.oninput = function() {
  document.getElementById("goButton").href = this.value + ".html";
}

生成的网址如下所示：https://yoursite.com/500.html，价格为500美元。

根据滑块值更改按钮中的链接

3 个答案: