如何更改输入中多个元素的位置

Question

我正在尝试以百分比的形式修改输入元素的负值中具有相同id的5个元素的左参数。在实践中，我希望当输入值发生变化时，5 个元素的左参数等于输入值但为负且以百分比表示。

var x = document.getElementById-("input");
   function myFunction() {
      document.getElementById('slide').style.left = x ;
     }

<div class="exemple">
      <img id="slide" src="example">
      <img id="slide" src="example">
      <img id="slide" src="example">
      <img id="slide" src="example">
      <img id="slide" src="example">
   </div>
   <input id="inupt" onchange = "myFunction()">
  

</div>

Answer 1

哇，你的代码真的很麻烦。下次请注意你的错别字！这应该可以完成工作，我不知道你到底在做什么，但我建议你使用滑块框架。

function myFunction() {
  var slides = document.getElementsByClassName("slide");

  var x = document.getElementById("input").value;
  Array.prototype.forEach.call(slides, function(el) {

    el.style.left = "" + x + "px";
  });
}

.slide {
  position: relative;
}

<div class="exemple">
  <img class="slide" src="example">
  <img class="slide" src="example">
  <img class="slide" src="example">
  <img class="slide" src="example">
  <img class="slide" src="example">
</div>
<input id="input" onchange="myFunction()">

Answer 2

您不能有超过一个具有相同 ID 的元素 - 这是有道理的，因为 ID 是唯一的。
如果您想操作一个以上的元素，您可以使用 class 属性。

我猜你想达到这样的目的（在js中添加注释以便解释）：

function myFunction() { // when the input value changes
var x = document.getElementsByClassName('slide'); // this is the images with the class instead of id
var y = document.getElementById('demo').value; // this will take the current value of the input
  for (var i=0; i < x.length; i++) { // this will illitrate all images with the class slide
    x[i].style.left = y+'px'; // this will move all of them left
  }
}

img {width: 100px; height: 100px; border: 1px solid black; position: relative;}

<div>
  <img class="slide" />
  <img class="slide" />
  <img class="slide" />
  <img class="slide" />
  <img class="slide" />
</div>
<input type="number" id="demo" onchange="myFunction()" value="0">

Answer 3

我想这就是你想要实现的目标 -

<div class="example">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
   </div>
   <input id="input" onchange = "myFunction(this)">
</div>

<script>
var myFunction=function(inputElement) {
  let x=inputElement.value;
  let imgElements=document.getElementsByClassName('slide');
  Array.prototype.forEach.call(document.getElementsByClassName('slide'),(imgEle)=> {
    console.log(imgEle);
    imgEle.style.left=x+'px';
  })

}
</script>

如何更改输入中多个元素的位置

How to change position of multiple elements on input

html

javascript

css

interactive

positioning