首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript Js 价格范围滑块仅在第一部分工作

price range slider: img I have used the price range slider in my HTML page, but i need to add this price range slider in three different sections on same HTML page. but only the first section price slider is working , other two sliders are not working. here is my code

const rangeInput = document.querySelectorAll(".range-input input"),
  priceInput = document.querySelectorAll(".price-input input"),
  range = document.querySelector(".slider .progress1");

let priceGap = 1000;

priceInput.forEach(input => {
  input.addEventListener("input", e => {
    let minPrice = parseInt(priceInput[0].value),
      maxPrice = parseInt(priceInput[1].value);

    if ((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max) {
      if (e.target.className === "input-min") {
        rangeInput[0].value = minPrice;
        range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";
      } else {
        rangeInput[1].value = maxPrice;
        range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
      }
    }
  });
});

rangeInput.forEach(input => {
  input.addEventListener("input", e => {
    let minVal = parseInt(rangeInput[0].value),
      maxVal = parseInt(rangeInput[1].value);

    if ((maxVal - minVal) < priceGap) {
      if (e.target.className === "range-min") {
        rangeInput[0].value = maxVal - priceGap
      } else {
        rangeInput[1].value = minVal + priceGap;
      }
    } else {
      priceInput[0].value = minVal;
      priceInput[1].value = maxVal;
      range.style.left = ((minVal / rangeInput[0].max) * 100) + "%";
      range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
    }
  });
});
<div class="price-input">
  <div class="field">
    <input type="number" class="input-min" value="1000">
    <div class="separator">-</div>
    <input type="number" class="input-max" value="100000">
  </div>
</div>
<div class="slider">
  <div class="progress1"></div>
</div>
<div class="range-input">
  <input type="range" class="range-min" min="1000" max="100000" value="1000" step="100">
  <input type="range" class="range-max" min="0" max="100000" value="100000" step="100">
</div>



//second slider
<div class="price-input">
  <div class="field">
    <input type="number" class="input-min" value="1000">
    <div class="separator">-</div>
    <input type="number" class="input-max" value="100000">
  </div>
</div>
<div class="slider">
  <div class="progress1"></div>
</div>
<div class="range-input">
  <input type="range" class="range-min" min="1000" max="100000" value="1000" step="100">
  <input type="range" class="range-max" min="0" max="100000" value="100000" step="100">
</div>

我正在try 激活所有的价格滑块只有一个脚本文件

推荐答案

您的javascrip代码仅适用于Slider1，因此我按如下方式更新您的代码

<div class="slider1-wrapper">
    <div class="price-input">
        <div class="field">
            <input type="number" class="input-min" value="1000">
            <div class="separator">-</div>
            <input type="number" class="input-max" value="100000">
        </div>
    </div>
    <div class="slider">
        <div class="progress1"></div>
    </div>
    <div class="range-input">
        <input type="range" class="range-min" min="1000" max="100000" value="1000" step="100">
        <input type="range" class="range-max" min="0" max="100000" value="100000" step="100">
    </div>

    </div>
</div>



<div class="slider2-wrapper">
    <div class="price-input">

        <div class="field">
            <input type="number" class="input-min" value="1000">
            <div class="separator">-</div>
            <input type="number" class="input-max" value="100000">
        </div>
    </div>
    <div class="slider">
        <div class="progress1"></div>
    </div>
    <div class="range-input">
        <input type="range" class="range-min" min="1000" max="100000" value="1000" step="100">
        <input type="range" class="range-max" min="0" max="100000" value="100000" step="100">
    </div>

    </div>
</div>


<script>
    let priceGap = 1000;

    //js for slider1
    const rangeInput1 = document.querySelectorAll(".slider1-wrapper .range-input input"),
        priceInput1 = document.querySelectorAll(".slider1-wrapper .price-input input"),

        range1 = document.querySelector(".slider1-wrapper .slider .progress1");    

    priceInput1.forEach(input => {
        input.addEventListener("input", e => {
            let minPrice = parseInt(priceInput1[0].value),
                maxPrice = parseInt(priceInput1[1].value);

            if ((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput1[1].max) {
                if (e.target.className === "input-min") {
                    rangeInput1[0].value = minPrice;
                    range1.style.left = ((minPrice / rangeInput1[0].max) * 100) + "%";
                } else {
                    rangeInput1[1].value = maxPrice;
                    range1.style.right = 100 - (maxPrice / rangeInput1[1].max) * 100 + "%";
                }
            }
        });
    });

    rangeInput1.forEach(input => {
        input.addEventListener("input", e => {
            let minVal = parseInt(rangeInput1[0].value),
                maxVal = parseInt(rangeInput1[1].value);

            if ((maxVal - minVal) < priceGap) {
                if (e.target.className === "range-min") {
                    rangeInput1[0].value = maxVal - priceGap
                } else {
                    rangeInput1[1].value = minVal + priceGap;
                }
            } else {
                priceInput1[0].value = minVal;
                priceInput1[1].value = maxVal;
                range1.style.left = ((minVal / rangeInput1[0].max) * 100) + "%";
                range1.style.right = 100 - (maxVal / rangeInput1[1].max) * 100 + "%";
            }
        });
    });



   //js for slider2

    const rangeInput2 = document.querySelectorAll(".slider2-wrapper .range-input input"),
        priceInput2 = document.querySelectorAll(".slider2-wrapper .price-input input"),

        range2 = document.querySelector(".slider2-wrapper .slider .progress1");
          
    priceInput2.forEach(input => {
        input.addEventListener("input", e => {
            let minPrice = parseInt(priceInput1[0].value),
                maxPrice = parseInt(priceInput1[1].value);

            if ((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput2[1].max) {
                if (e.target.className === "input-min") {
                    rangeInput2[0].value = minPrice;
                    range2.style.left = ((minPrice / rangeInput2[0].max) * 100) + "%";
                } else {
                    rangeInput2[1].value = maxPrice;
                    range2.style.right = 100 - (maxPrice / rangeInput2[1].max) * 100 + "%";
                }
            }
        });
    });

    rangeInput2.forEach(input => {
        input.addEventListener("input", e => {
            let minVal = parseInt(rangeInput2[0].value),
                maxVal = parseInt(rangeInput2[1].value);

            if ((maxVal - minVal) < priceGap) {
                if (e.target.className === "range-min") {
                    rangeInput2[0].value = maxVal - priceGap
                } else {
                    rangeInput2[1].value = minVal + priceGap;
                }
            } else {
                priceInput2[0].value = minVal;
                priceInput2[1].value = maxVal;
                range2.style.left = ((minVal / rangeInput2[0].max) * 100) + "%";
                range2.style.right = 100 - (maxVal / rangeInput2[1].max) * 100 + "%";
            }
        });
    });
</script>

Javascript相关问答推荐

在HTML中使用脚本变量作为背景图像源

在JavaScript中检索一些文本

如何通过在提交时工作的函数显示dom元素？

ReactJS中的material UI自动完成类别

将json数组项转换为js中的扁平

警告！合同执行期间遇到错误[执行已恢复](Base Layer 2)

在这种情况下，如何 for each 元素添加id？

如何添加绘图条形图图例单击角形事件

在带有背景图像和圆形的div中添加长方体阴影时的重影线

如何在Vue 3中创建自定义 Select 组件，并将选项作为HTML而不是props 传递？

使用Promise.All并发解决时，每个promise 的线性时间增加？

从包含数百行的表中获取更改后的值(以表单形式发送到后端)的正确方法是什么？

对路由DOM嵌套路由作出react

用于在路径之间移动图像的查询

如何在Node.js中排除导出的JS文件

为什么云存储中的文件不能公开使用？

使用Document.Evaluate() Select 一个包含撇号的HTML元素

判断函数参数的类型

如何在TransformControls模式下只保留箭头进行翻译？

将延迟加载的模块转换为Eager 加载的模块

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630