如何使用JavaScript变量的值更新虚拟html元素的样式属性? [英] How can I update the style attribute of a virtual html element with the value of a JavaScript variable?

问题描述

我正在使用此JavaScript图像(和文本)滑块.

I am working on this JavaScript image (and text) slider.

我用JavaScript创建幻灯片列表，并将其附加到DOM中的div:

I create a list of slides in JavaScript and append it to a div in the DOM:

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);

在上面的代码 中，当JavaScript变量let translateAmount = 0的值(从0更改为不同的百分比)时，translateAmount不会更新.

In the code above, translateAmount does not update when the JavaScript variable let translateAmount = 0 changes its value (from 0 to different percentages).

 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();
}

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);

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 {
  width: 30px;
  height: 60px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  opacity: 0.75;
  font-size: 48px;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  z-index: 2;
}

.controls span:last-child {
  right: 0;
}

<div id="imageSlider">
  <div class="controls" id="sliderControls">
    <span onClick="prevSlide()">&lsaquo;</span>
    <span onClick="nextSlide()">&rsaquo;</span>
  </div>
</div>

如何解决此错误?

推荐答案

您可以修改值，但不能修改元素的样式(例如，它不是数据绑定的，例如react)，因此您必须将UL赋给变量，然后在updateAmount中，您应该执行类似的操作

you modify value but not the style of element (it's not data-binded as it is in for example react), so you must take your UL to variable, and then in updateAmount you should do something like

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

这篇关于如何使用JavaScript变量的值更新虚拟html元素的样式属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！