时间戳

首页 > 解决方案 > 如何根据滑块输入更改链接？

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

问题描述

我正在创建一个滑块，用户可以通过该滑块从 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>

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

标签： javascriptaddeventlistener

解决方案

 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>

推荐阅读