有多个前后比较滑块

Question

你好，我试图循环一个之前/之后的图像滑块，但我遇到了问题，使用单个滑块它工作正常，但是一旦我将它通过 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+"%";
}

Answer 1

我认为问题在于，当您尝试执行 moveDivisor 函数时，您只引用了一个元素。 Javascript 在从文档中获取 id 时只找到一个元素，因为 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+"%";
}