Question

请帮助我将.active类分配给由JS生成的滑块点，它们不是HTML的一部分。当幻灯片1处于活动状态时，我需要点1具有.active类，但没有运气..我提供的所有解决方案都是针对以HTML硬编码的点。

我的HTML：

  <div class="w3-content w3-display-container">
    <div class="w3-display-container mySlides">
        <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 1</h3>
            <p>1. Lorem Ipsum.</p>
        </div>
    </div>
    <div class="w3-display-container mySlides">
        <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 2</h3>
            <p>2.Lorem Ipsum.</p>
        </div>
    </div>
    <div class="w3-display-container mySlides">
        <div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 3</h3>
            <p>3. Lorem Ipsum.</p>
        </div>
    </div>
    <button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
    <div id="js-slider-dots"></div>
    <button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>
  </div>

我的JS（可切换幻灯片并生成点）：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function goToDiv(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

function generateDots() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        var dotNumber = i + 1;
        var dot = document.createElement('span');
        dot.innerHTML =
            '<button class="js-dot" onclick="goToDiv(' + dotNumber + ')">' + dotNumber + '</button>';

        document.getElementById('js-slider-dots').appendChild(dot);

    }
}
generateDots();

它也全部存在于JS Bin上：https://jsbin.com/ketohatane/edit?html,js,output

Answer 1

您可以通过all_couples = ((x, y) for y in words[i:] for i, x in enumerate(words))和.classList.add()轻松地做到这一点。

只需选择点，然后激活属于.remove()上活动幻灯片的点：

showDivs

查看以下代码段：

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    //get the list of dots
    var y = document.getElementById("js-slider-dots").children;
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
        //remove .active from all dots
        y[i].classList.remove("active")
    }
    x[slideIndex - 1].style.display = "block";
    //add .active to the selected dot
    y[slideIndex - 1].classList.add("active")
}

var slideIndex = 1;

function plusDivs(n) {
	showDivs(slideIndex += n);
}

function goToDiv(n) {
	showDivs(slideIndex = n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//get the list of dots
var y = document.getElementById("js-slider-dots").children;
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    //remove .active from all dots
    y[i].classList.remove("active")
}
x[slideIndex - 1].style.display = "block";
//add .active to the selected dot
y[slideIndex - 1].classList.add("active")
}

function generateDots() {
	var i;
	var x = document.getElementsByClassName("mySlides");
	for (i = 0; i < x.length; i++) {
		var dotNumber = i + 1;
		var dot = document.createElement('span');
		dot.innerHTML =
			'<button class="js-dot" onclick="goToDiv(' + dotNumber + ')">' + dotNumber + '</button>';

		document.getElementById('js-slider-dots').appendChild(dot);

	}
}
generateDots();
//placed AFTER generateDots()
showDivs(slideIndex);

/* Just for illustration */
.active{outline:solid 1px red;}

Answer 2

如果您通过goToDiv函数访问DOM，则可以确保使用class="js-dot"元素更新了DOM之后，便可以访问DOM。

类似的东西将为您提供所需的功能。

function goToDiv(n) {
    showDivs(slideIndex = n);
    var dots = document.getElementsByClassName('js-dot');
    for(var i = 0; i < dots.length; i++) {
      if (i == n - 1) {
        dots[i].classList.add('active');
      } else {
        dots[i].classList.remove('active');
      }
    }
}

这里正在起作用： https://jsbin.com/tekukebeye/1/edit?html,js,output

Vanilla JS-滑块-有效点

2 个答案: