Vanilla JS - 滑块 - 活动点

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

您可以通过.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")
}

看到这个sn-p：

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

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

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