Question

我正在创建一个滑块，用户可以根据该滑块从500美元到10000美元之间选择某个对象的价格点。有4个不同的价格点。 0〜1000,1001〜2000,2001〜4000和4001〜10000。通过单击“将我带到我的理想对象！”，每个不同的价格点都应转到不同的链接。我不确定该怎么做才能使链接实时更新。

<div id='slidecontainer'>
      <form oninput="x.value=parseInt(tierslider.value)">
          <span>500</span>
          <input type='range' min='500' max='10000' value='500' id='tierslider'>
          <span>10000</span>
          <output id='tierslider2' name='x'></output>
      </form>
</div>

      <a href='#' id='DisplaySliderResult'>Take me to my ideal object!</a>

我希望输出链接会根据该值不断更新，以便用户可以根据自己的预算访问不同的网站。

Answer 1

您应按照此处的说明使用on change事件：

https://www.w3schools.com/jsref/event_onchange.asp

然后在onchenge函数中执行以下操作：

var myInput = document.getElementById("tierslider");
var link = document.getElementById("DisplaySliderResult");
if(myInput.value > 100) { // just an example
    link.href = "..."
}

Answer 2

您可以使用javascript根据滑块值获取正确的网址。您可以使用onclick事件来调用function。获取滑块值，并在符合条件时重定向到特定的网址。

这是代码：

<div id='slidecontainer'>
    <form oninput="x.value=parseInt(tierslider.value)">
        <span>500</span>
        <input type='range' min='500' max='10000' value='500' id='tierslider'>
        <span>10000</span>
        <output id='tierslider2' name='x'></output>
    </form>
</div>

<a href='#' id='DisplaySliderResult' onclick='changeLink()'>Take me to my ideal object!</a>

<script>
    function changeLink() {
        var sliderValue = document.getElementById("tierslider").value;
        if(sliderValue <= 1000){
            window.location.href = "http://www.google.com";
        }
        else if(sliderValue <= 2000){
            window.location.href = "http://www.microsoft.com";
        }
        else if(sliderValue <= 4000){
            window.location.href = "http://www.stackoverflow.com";
        }
        else{
            window.location.href = "http://www.github.com";
        }
    }
</script>

Answer 3

使用Element.setAttribute()

document.getElementById('smpl').addEventListener('click', function() {

  document.getElementById('smplh').setAttribute('href', 'https://stackoverflow.com');

  document.getElementById('smplh').innerHTML = 'click to go to stackoverflow';

});

<a href="https://www.google.com" id="smplh">click to go to google</a>

<button id="smpl">click to change the hyperlink adress to stackoverflow</button>

Answer 4

您可以使用此方法。首先在javascript中使用所需的值创建一个数组。此后，无论何时滑块更改都会更新输出中的选定值。最后，当您单击链接时，选择值并将其附加到链接

// Setting custom points to slider
var values = [0, 1000,2000,4000,10000];

var input = document.getElementById('tierslider'),
    output = document.getElementById('tierslider2');
    
input.oninput = function(){
    output.innerHTML = values[this.value];
};

input.oninput();

// Redirect 
function redirectToLinks(elem){
  window.location.href = elem.dataset.baselink + values[input.value];
}

<div id='slidecontainer'>
      <form>
          <span>500</span>
          <input type='range' min='0' max='4' value="0" step="1" id='tierslider'>
          <span>10000</span>
          <span id='tierslider2'></span>
      </form>
</div>

<a href='#' data-baselink='http://www.example.com/page?param=' id='DisplaySliderResult' onclick="redirectToLinks(this)">Take me to my ideal object!</a>

Answer 5

 function onRangeChanged(value) {
   let advertiseLink = document.getElementById('DisplaySliderResult');
        let url = advertiseLink.href;
        console.log(value);
        value = parseInt(value);
        switch(true) {
          case value >= 0 && value <= 1000:
            url = "link1";
            break;
          case value > 1000 && value <= 2000: 
            url= "link2";
            break;
          case value > 2000 && value <= 4000: 
            url= "link3";
            break;
          case value > 4000 && value <= 10000: 
            url= "link4";
            break;
        }
        advertiseLink.setAttribute('href', url);
        console.log(advertiseLink);
      }

 <form oninput="x.value=parseInt(tierslider.value)">
        <span>500</span>
        <input type='range' min='500' max='10000' value='500' id='tierslider' onchange="onRangeChanged(this.value)">
        <span>10000</span>
        <output id='tierslider2' name='x'></output>
    </form>

<a href='#' id='DisplaySliderResult'>Take me to my ideal object!</a>

如何根据滑块输入更改链接？

5 个答案: