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

【问题标题】：How to change position of multiple elements on input如何在输入中更改多个元素的位置
【发布时间】：2019-09-22 09:33:25
【问题描述】：

我正在尝试将输入元素的负值中具有相同 id 的 5 个元素的 left 参数修改为百分比。在实践中我希望当输入值发生变化时，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>

【问题讨论】：

您不能有多个具有相同 id 的元素。 x 的预期值是多少？
@NithinKumarBiliya 谢谢，我会改id，x的期望值就是input的值
这看起来像是XY problem 的案例——从整体上看，您想要达到什么目的？ img 元素用于内容，而不是装饰。
@amn 它就像一种幻灯片，我希望用户能够使用滑块浏览幻灯片 (img)，但不用担心，现在它可以工作了

标签： javascript html css positioning interactive

【解决方案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()">

【讨论】：

【解决方案2】：

您不能拥有多个具有相同 ID 的元素 - 因为 ID 是唯一的，所以这很有意义。
如果要操作多个元素，可以使用 class 属性。

我猜你想实现这样的事情（在js中添加了cmets以便解释）：

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">

【讨论】：

【解决方案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>

【讨论】：