Javascript 不会切换元素的显示

因此，我正在尝试在我的网站上获取多个幻灯片。我几乎做了所有事情，除了当我按下图片时，预览模式正在显示，但点击的图像没有显示。我必须使用幻灯片的按钮来浏览它们并使第一个出现。 **

如果你不想看这整个代码，你可以在这里看到发生了什么:http://beta.eduardstefan.com

** 我不是想推销自己，我只是觉得没有例子我不太容易理解

那么，我的问题是，我如何才能让第一张图片在我按下时显示，或者为什么它没有发生，我的代码有什么问题？

我的 html:

<div class="portfolio-slideshow">
    <a class="prev" onclick="slide(0,-1)">❮</a>
    <div class="slide"> <img src="img/dailyui/008.png" class="slideimg_0" id="0" data-no="0"> </div>
    <div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1" data-no="0"> </div>
    <div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2" data-no="0"> </div>
    <div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3" data-no="0"> </div>
    <a class="next" onclick="slide(0,1)">❯</a>
</div>

<div class="portfolio-slideshow">
    <a class="prev" onclick="slide(2,-1)">❮</a>
    <div class="slide"> <img src="img/dailyui/008.png" class="slideimg_2" id="0" data-no="2"> </div>
    <div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_2" id="1" data-no="2"> </div>
    <div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_2" id="2" data-no="2"> </div>
    <div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_2" id="3" data-no="2"> </div>
    <a class="next" onclick="slide(2,1)">❯</a>
</div>

<div class="imgpreview">
    <i class="fa fa-close" onclick="closepreview()"></i>
    <div class="slidepreview no_0">
        <a class="prev" onclick="slide(1,-1)">❮</a>
        <div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_1" id="0"> </div>
        <div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_1" id="1"> </div>
        <div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_1" id="2"> </div>
        <div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_1" id="3"> </div>
        <a class="next" onclick="slide(1,1)">❯</a>
    </div>
    <div class="slidepreview no_2">
        <a class="prev" onclick="slide(3,-1)">❮</a>
        <div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_3" id="0"> </div>
        <div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_3" id="1"> </div>
        <div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_3" id="2"> </div>
        <div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_3" id="3"> </div>
        <a class="next" onclick="slide(3,1)">❯</a>
    </div>
</div>

SCSS:

.portfolio-slideshow{
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slide{
    padding:0 35px;
    display: block;

    img{
        display: none;
        max-height:40vh;
        max-width:100%;
    }
}
.prev,.next{
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgpreview{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.slidepreview{
    display: none;
    align-items: center;
    justify-content: center;

.slidep{
    display: block;

    img{
        display: none;
        max-height: 85vh;
        max-width: 85vw;
    }
}

和 Javascript:

var slideIndex = [0,0,0,0,0,0,0,0]
function showSlides(){
    var aux = slideIndex.length;
    var i;
    for(i=0; i<aux; i+=2) { slide(i,0); }
}

function slide(n,m){
    var i;
    var aux = document.getElementsByClassName("slideimg_" + n);
    var aux2 = aux.length - 1;
    if (slideIndex[n] == 3 && m == 1) slideIndex[n] = -1;
    if (slideIndex[n] == 0 && m == -1) slideIndex[n] = 4;
    slideIndex[n] += m;
    if (slideIndex[n] < 0) slideIndex = aux2;
    else if (slideIndex[n] > aux2) slideIndex = 0;
    for(i=0; i<aux.length; i++){
        aux[i].style.display = "none";
        aux[i].parentElement.style.display = 'none';
    }
    aux[slideIndex[n]].style.display = "block";
    aux[slideIndex[n]].parentElement.style.display = 'block';
}

function closepreview(){
    $('.imgpreview').css("display" , "none");
    $('.slidepreview').css("display" , "none")
}

$(document).ready(function() {
    $(".slide img").click(function(){
        var id = $(this).attr('id');
        var no = $(this).attr('data-no');
        var no2 = no + 1;

        $(".imgpreview").css("display" , "flex");
        $(".no_" + no).css("display" , "flex");
        $("img#" + id + ".slideimg_" + no2).css("display" , "block");
        slideIndex[no2] = id;
    });
}).resize();

最佳答案

ID 必须是唯一的。

我建议将它们附加到 js 代码而不是内联事件处理程序(将 html 与 js 代码分开)。

我删除了所有 ID，并使用以下方法更改了 jQuery 中的所有内容:

.index()
.toggle( display )
.nextAll() , .next() , .prev()和 .prevAll()

我用了一个类:active。该类用于标记当前事件元素。此外，每次我需要移动 next 或 prev 时，我都会将此类移动到相应的元素。此类跟踪必须显示的 img。

片段:

$(document).ready(function() {
    //
    // Toggle visibility
    //
    $('.slide:not(.active), .slide:not(.active) img').toggle(false);
    $('.slide.active, .slide.active img').toggle(true);

    //
    // closing preview....
    //
    $('.imgpreview .fa.fa-close').on('click', function(e) {
        $('.imgpreview, .slidepreview').css("display" , "none");
        //
        // ...remove active class and toggle visibility
        //
        $('.imgpreview, .slidepreview').find('.active, .active img').toggleClass(false).removeClass('active');
    });

    //
    // on prev....
    //
    $(".prev").on('click', function(e) {
        //
        // get the active element and so the previous one
        //
        var active = $(this).nextAll('.slide.active');
        var prev = active.prev('.slide');
        if (prev.length == 0) {
            //
            // if at the beginning take the last one
            //
            prev = $(this).nextAll('.slide').last();
        }
        //
        // move active class and toggle visibility
        //
        active.removeClass('active');
        prev.addClass('active').find('img').andSelf().toggle(true);
        $('.slide:not(.active), .slide:not(.active) img').toggle(false);
    });

    $(".next").on('click', function(e) {
        //
        // get the active element and so the next one
        //
        var active = $(this).prevAll('.slide.active');
        var next = active.next('.slide');
        if (next.length == 0) {
            //
            // if at the end take the first one
            //
            next = $(this).prevAll('.slide').last();
        }
        //
        // move active class and toggle visibility
        //
        active.removeClass('active');
        next.addClass('active').find('img').andSelf().toggle(true);
        $('.slide:not(.active), .slide:not(.active) img').toggle(false);
    });

    $(".slide img").on('click', function(e) {
        //
        // take the index of curr element in the parent element
        //
        var idx = $(this).closest('div.slide').index();
        var no = $(this).data('no');

        $('.imgpreview, .no_' + no).css('display' , 'flex');
        $('.no_' + no).children().eq(idx).addClass('active');
        $('.no_' + no).find('.slide:not(.active), .slide:not(.active) img').toggle(false);
        $('.no_' + no).find('.slide.active, .slide.active img').toggle(true);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/style.css">
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/font-awesome.css">


<div class="portfolio-slideshow">
    <a class="prev">❮</a>
    <div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_0" data-no="0"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_0" data-no="0"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_0" data-no="0"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_0" data-no="0"></div>
    <a class="next">❯</a>
</div>

<div class="portfolio-slideshow">
    <a class="prev">❮</a>
    <div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_2" data-no="2"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_2" data-no="2"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_2" data-no="2"> </div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_2" data-no="2"></div>
    <a class="next">❯</a>
</div>

<div class="imgpreview">
    <i class="fa fa-close"></i>
    <div class="slidepreview no_0">
        <a class="prev" onclick="slide(1,-1)">❮</a>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_1"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_1"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_1"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_1"></div>
        <a class="next">❯</a>
    </div>
    <div class="slidepreview no_2">
        <a class="prev">❮</a>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_3"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_3"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_3"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_3"></div>
        <a class="next">❯</a>
    </div>
</div>

关于Javascript 不会切换元素的显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43454067/

Javascript 不会切换元素的显示

如果你不想看这整个代码，你可以在这里看到发生了什么:http://beta.eduardstefan.com

上一篇：html - 滚动时如何让文本与背景图像保持固定？

下一篇：jquery - 如何用jquery限制 "0"不应该放在文本框中的第一个字符我该怎么办