Question

在这里，我使用javascript作为我的轮播滑块。我做了所有的事情，我只面对一个问题，就是当我点击我的下一个按钮时，它选择我页面上的所有部分，但我只想在我的div中选择我的部分。

这是我的代码：

＆＃13;

 var divMain = document.getElementById("slide");
    console.log(divMain)

    var align = divMain.getAttribute("type");
    console.log(align)

    divMain.insertAdjacentHTML("afterbegin",' <progress id="progressbar" value="0" max="100"></progress>');
    if(align == "slideshow") {
        var timeline = document.getElementById('slide');
       $("#progressbar").css("display","none");
        timeline.insertAdjacentHTML("afterbegin",'<a class="left  color_arrow carousel-control" href="#myCarousel" onclick = "plusDivs(-1)" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');

        timeline.insertAdjacentHTML('afterbegin',' <a class="right color_arrow  carousel-control" href="#myCarousel"  onclick = "plusDivs(1)" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');

        var slideIndex = 2;
        showDivs(slideIndex);

        function plusDivs(sliderItem) {
            showDivs(slideIndex += sliderItem, sliderItem);
        }

        function showDivs(sliderItem, dir) {
            let i;

            let sliderData = document.getElementsByTagName("section");
            
            if (sliderItem > sliderData.length) {slideIndex = 1}    
            if (sliderItem < 1) {slideIndex = sliderData.length}

            for (i = 1; i < sliderData.length; i++) {
                sliderData[i].classList.add('hide')
                sliderData[i].classList.remove('active')  
                sliderData[i].classList.remove('animated')  
                sliderData[i].classList.remove('fadeInRight')  
            }

            sliderData[slideIndex-1].classList.remove('hide')
            sliderData[slideIndex-1].classList.add('active')
            sliderData[slideIndex-1].classList.add('animated')
            if(dir === 1)
                sliderData[slideIndex-1].classList.add('fadeInLeft')
            else if(dir === -1)
                sliderData[slideIndex-1].classList.add('fadeInRight')
        }
    }

＆＃13;

<div type="timeline/slideshow" id="slide">
	<section >
		<header>Title One</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Two</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Three</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Four</header>
		<article>Content</article>
	</section>
</div>

＆＃13;

我该怎么做才能解决此错误。将不胜感激。

Answer 1

使用此代码：

let slideElement = document.getElementById("slide");

let sliderData = slideElement.getElementsByTagName("section");

而不是：

let sliderData = document.getElementsByTagName("section");

检查此JsFiddle以查看其工作原理：https://jsfiddle.net/4jkvrszw/12/

选择我页面上的特定部分不包括使用javascript的所有部分？

1 个答案: