如何使用 JavaScript 变量的值更新虚拟 html 元素的样式属性？

Question

我正在处理这个 JavaScript 图像（和文本）滑块。我在 JavaScript 中创建了一个幻灯片列表，并将其附加到 DOM 中的一个 div：let slidesHtml = '<ul style="width: ' + slidesListWidth + '; transform: translateX(' + translateAmount + ')">'; for (let i = 0; i < slidesLen; i++) {   slidesHtml += '<li style="width: ' + slideWidth + '">' + '<img src="' + slides[i].image + '" alt="' + slides[i].text + '"><span class="text">' + slides[i].text + '</span></li>'; } slidesHtml += '</ul>' sliderControls.insertAdjacentHTML('afterend', slidesHtml);在上面的代码中，translateAmount当 JavaScript 变量let translateAmount = 0更改其值（从 0 到不同的百分比）时不会更新。 let slides = [{     text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque.",     image: "https://picsum.photos/1200/600?gravity=east"   },   {     text: "Sit quis provident reiciendis sed optio molestias impedit maiores nesciunt!",     image: "https://picsum.photos/1200/600?gravity=west"   },   {     text: "Odio mollitia inventore nostrum quasi labore architecto quis id repudiandae quidem!",     image: "https://picsum.photos/1200/600?gravity=north"   } ];let slider = document.getElementById('imageSlider');let sliderControls = document.getElementById('sliderControls');let slidesLen = slides.length;let slidesListWidth = slidesLen + '00%';let slideWidth = (1 / slidesLen * 100) + '%';let clickCount = 0;let translateAmount = 0;function updateAmount() {  translateAmount = clickCount * 1 / slidesLen * 100 + '%';  console.log(translateAmount);}function nextSlide() {  if (Math.abs(clickCount) < slidesLen - 1) {    clickCount--;  } else {    clickCount = 0;  }  updateAmount();}function prevSlide() {  if (clickCount < 0) {    clickCount++;  } else {    clickCount = 1 - slidesLen;  }  updateAmount();}

Answer 1

你修改了值而不是元素的样式（它不是数据绑定的，因为它在例如反应中），所以你必须把你的 UL 变成变量，然后在 updateAmount 中你应该做类似的事情

function updateAmount() {
    translateAmount = clickCount * 1 / slidesLen * 100 + '%';
    yourUlElement.style.transform = 'translateX(' + translateAmount + ')';
}

Answer 2

您没有向 DOM 写入任何内容，您只是设置了一个 JavaScript 变量。

在您的 updateAmount() 函数中，您需要获取对 DOM 中 ul 元素的引用，并使用更新后的值设置样式属性。

也就是说，这不是一个很好的实现。而不是使用全局变量，也许可以尝试为此创建一个封装的组件，其中包含您在单击下一个和上一个按钮时更新的本地状态。此外，通过使用模板字符串而不是所有这些连接，您可以大大提高可读性。

Answer 3

有完整的工作滑块，供可能需要的人使用：

(function() {

  let slides = [{

      text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque.",

      image: "https://picsum.photos/1200/600?gravity=east"

    },

    {

      text: "Aperiam eligendi animi, suscipit repellendus tempore amet totam excepturi, porro facere nulla dignissimos pariatur doloribus dolorum sunt, et veritatis expedita consectetur.",

      image: "https://picsum.photos/1200/600?gravity=west"

    },

    {

      text: "Odio mollitia inventore nostrum quasi labore architecto quis id repudiandae quidem!",

      image: "https://picsum.photos/1200/600?gravity=north"

    },

    {

      text: "Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque. Inventore nostrum quasi labore architecto quis id repudiandae quidem!",

      image: "https://picsum.photos/1200/600?gravity=south"

    }

  ];

  let slider = document.getElementById('imageSlider');

  let sliderControls = document.getElementById('sliderControls');

  let slidesLen = slides.length;

  let slidesListWidth = slidesLen + '00%';

  let slideWidth = (1 / slidesLen * 100) + '%';

  let clickCount = 0;

  let translateAmount = 0;

  function updateAmount() {

    translateAmount = clickCount * 1 / slidesLen * 100 + '%';

    document.getElementById('slidesList').style.transform = 'translateX(' + translateAmount + ')';

  }

  window.nextSlide = function() {

    if (Math.abs(clickCount) < slidesLen - 1) {

      clickCount--;

    } else {

      clickCount = 0;

    }

    updateAmount();

  }

  window.prevSlide = function() {

    if (clickCount < 0) {

      clickCount++;

    } else {

      clickCount = 1 - slidesLen;

    }

    updateAmount();

  }

  let slidesHtml = '<ul id="slidesList" style="width: ' + slidesListWidth + '; transform: translateX(' + translateAmount + ')">';

  for (let i = 0; i < slidesLen; i++) {

    slidesHtml += '<li style="width: ' + slideWidth + '">' + '<img src="' + slides[i].image + '" alt="' + slides[i].text + '"><span class="text">' + slides[i].text + '</span></li>';

  }

  slidesHtml += '</ul>';

  sliderControls.insertAdjacentHTML('afterend', slidesHtml);

})();

body {

  margin: 0;

  padding: 0;

}

#imageSlider {

  margin: 0 auto;

  max-width: 1200px;

  position: relative;

  overflow-x: hidden;

}

#imageSlider ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  transition: all 1.0s ease-in-out;

}

#imageSlider li {

  display: block;

  float: left;

  position: relative;

}

#imageSlider img {

  display: block;

  width: 100%;

  height: auto;

}

#imageSlider .text {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 13px;

  text-align: justify;

  line-height: 1.5;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 15px;

  color: #fff;

  background: rgba(0, 0, 0, 0.15);

}

.controls span {

    line-height: 1;

    display: inline-block;

    text-align: center;

    width: 30px;

    height: 32px;

    line-height: 21px;

    cursor: pointer;

    color: #fff;

    font-size: 54px;

    position: absolute;

    top: 50%;

    margin-top: -18px;

    z-index: 2;

    opacity: 0;

    transition: opacity 0.25s ease-in-out;

}

.controls span:last-child {

  right: 0;

}

#imageSlider:hover .controls span {

  opacity: .75;

}

<div id="imageSlider">

  <div class="controls" id="sliderControls">

    <span onClick="prevSlide()">&lsaquo;</span>

    <span onClick="nextSlide()">&rsaquo;</span>

  </div>

</div>

注意：对于即时转换，请替换transition: all 1.0s ease-in-out为transition: all 0s.