有多个前后比较滑块

如何解决有多个前后比较滑块

你好，我试图循环一个“之前/之后”图像滑块，但是我遇到了问题，使用单个Slider可以正常工作，但是一旦我将它放入一个foreach循环中，我就只能工作一个，假设这是一个javascript“问题“？

HTML

@foreach ($studyCases as $studyCase)
<div id="comparison">
    <figure style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg); ">
    <div id="divisor" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);"></div>
    </figure>
    <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
  </div>

@endforeach

JavaScript

var divisor = document.getElementById("divisor"),slider = document.getElementById("slider");
function moveDivisor() { 
    divisor.style.width = slider.value+"%";
}

解决方法

我认为问题在于，当您尝试执行moveDivisor函数时，您仅引用了一个元素。当通过id从文档获取id时，Javascript仅找到一个元素，因为id属性在整个HTML中应该是唯一的。您可以尝试构建HTML结构，例如将循环索引添加到您的ID：

id="divisor-{{ $loop->index }}"

然后，您可以通过传递元素ID来在onclick中起作用，以相同的方式让javascript知道您要尝试到达哪个滑块：

oninput="moveDivisor('divisor-{{ $loop->index }}')"

最后一步是修改您的javascript，使其找到合适的元素：

function moveDivisor(elementId) { 
    var divisor = document.getElementById(elementId);
    divisor.style.width = slider.value+"%";
}