Как изменить положение нескольких элементов на входе - PullRequest
Новая
       23

Как изменить положение нескольких элементов на входе

1 голос
/ 22 сентября 2019

Я пытаюсь изменить левый параметр из 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>

Ответы [ 3 ]

1 голос
/ 22 сентября 2019

Ух ты, твой код был действительно довольно хлопотным.Пожалуйста, следите за своими опечатками в следующий раз!Это должно сделать работу, я не знаю точно, что вы делаете, но я советую вам использовать каркас для слайдеров. 

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()">
0 голосов
/ 22 сентября 2019

Думаю, это то, чего вы хотели достичь - 

<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>
0 голосов
/ 22 сентября 2019
  1. Вы не можете иметь более одного элемента с одинаковым идентификатором - это имеет смысл, поскольку идентификаторы уникальны.
  2. Если вы хотите манипулировать более чем одним элементом, вы можете использовать атрибут класса.

Полагаю, вы хотите достичь чего-то подобного (добавлены комментарии к 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">
...