如何使用 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&nbsp;updateAmount()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;translateAmount&nbsp;=&nbsp;clickCount&nbsp;*&nbsp;1&nbsp;/&nbsp;slidesLen&nbsp;*&nbsp;100&nbsp;+&nbsp;'%'; &nbsp;&nbsp;&nbsp;&nbsp;yourUlElement.style.transform&nbsp;=&nbsp;'translateX('&nbsp;+&nbsp;translateAmount&nbsp;+&nbsp;')'; }

Answer 2

您没有向 DOM 写入任何内容，您只是设置了一个 JavaScript 变量。在您的 updateAmount() 函数中，您需要获取对 DOM 中 ul 元素的引用，并使用更新后的值设置样式属性。也就是说，这不是一个很好的实现。而不是使用全局变量，也许可以尝试为此创建一个封装的组件，其中包含您在单击下一个和上一个按钮时更新的本地状态。此外，通过使用模板字符串而不是所有这些连接，您可以大大提高可读性。

Answer 3

有完整的工作滑块，供可能需要的人使用：(function() {&nbsp; let slides = [{&nbsp; &nbsp; &nbsp; 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.",&nbsp; &nbsp; &nbsp; image: "https://picsum.photos/1200/600?gravity=east"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; text: "Aperiam eligendi animi, suscipit repellendus tempore amet totam excepturi, porro facere nulla dignissimos pariatur doloribus dolorum sunt, et veritatis expedita consectetur.",&nbsp; &nbsp; &nbsp; image: "https://picsum.photos/1200/600?gravity=west"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; text: "Odio mollitia inventore nostrum quasi labore architecto quis id repudiandae quidem!",&nbsp; &nbsp; &nbsp; image: "https://picsum.photos/1200/600?gravity=north"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; 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!",&nbsp; &nbsp; &nbsp; image: "https://picsum.photos/1200/600?gravity=south"&nbsp; &nbsp; }&nbsp; ];&nbsp; let slider = document.getElementById('imageSlider');&nbsp; let sliderControls = document.getElementById('sliderControls');&nbsp; let slidesLen = slides.length;&nbsp; let slidesListWidth = slidesLen + '00%';&nbsp; let slideWidth = (1 / slidesLen * 100) + '%';&nbsp; let clickCount = 0;&nbsp; let translateAmount = 0;&nbsp; function updateAmount() {&nbsp; &nbsp; translateAmount = clickCount * 1 / slidesLen * 100 + '%';&nbsp; &nbsp; document.getElementById('slidesList').style.transform = 'translateX(' + translateAmount + ')';&nbsp; }&nbsp; window.nextSlide = function() {&nbsp; &nbsp; if (Math.abs(clickCount) < slidesLen - 1) {&nbsp; &nbsp; &nbsp; clickCount--;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; clickCount = 0;&nbsp; &nbsp; }&nbsp; &nbsp; updateAmount();&nbsp; }&nbsp; window.prevSlide = function() {&nbsp; &nbsp; if (clickCount < 0) {&nbsp; &nbsp; &nbsp; clickCount++;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; clickCount = 1 - slidesLen;&nbsp; &nbsp; }&nbsp; &nbsp; updateAmount();&nbsp; }&nbsp; let slidesHtml = '<ul id="slidesList" style="width: ' + slidesListWidth + '; transform: translateX(' + translateAmount + ')">';&nbsp; for (let i = 0; i < slidesLen; i++) {&nbsp; &nbsp; slidesHtml += '<li style="width: ' + slideWidth + '">' + '<img src="' + slides[i].image + '" alt="' + slides[i].text + '"><span class="text">' + slides[i].text + '</span></li>';&nbsp; }&nbsp; slidesHtml += '</ul>';&nbsp; sliderControls.insertAdjacentHTML('afterend', slidesHtml);})();body {&nbsp; margin: 0;&nbsp; padding: 0;}#imageSlider {&nbsp; margin: 0 auto;&nbsp; max-width: 1200px;&nbsp; position: relative;&nbsp; overflow-x: hidden;}#imageSlider ul {&nbsp; list-style-type: none;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; transition: all 1.0s ease-in-out;}#imageSlider li {&nbsp; display: block;&nbsp; float: left;&nbsp; position: relative;}#imageSlider img {&nbsp; display: block;&nbsp; width: 100%;&nbsp; height: auto;}#imageSlider .text {&nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; font-size: 13px;&nbsp; text-align: justify;&nbsp; line-height: 1.5;&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; padding: 15px;&nbsp; color: #fff;&nbsp; background: rgba(0, 0, 0, 0.15);}.controls span {&nbsp; &nbsp; line-height: 1;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; width: 30px;&nbsp; &nbsp; height: 32px;&nbsp; &nbsp; line-height: 21px;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; font-size: 54px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; margin-top: -18px;&nbsp; &nbsp; z-index: 2;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transition: opacity 0.25s ease-in-out;}.controls span:last-child {&nbsp; right: 0;}#imageSlider:hover .controls span {&nbsp; opacity: .75;}<div id="imageSlider">&nbsp; <div class="controls" id="sliderControls">&nbsp; &nbsp; <span onClick="prevSlide()">&lsaquo;</span>&nbsp; &nbsp; <span onClick="nextSlide()">&rsaquo;</span>&nbsp; </div></div>注意：对于即时转换，请替换transition: all 1.0s ease-in-out为transition: all 0s.