javascript - 多次点击缩略图会使网站出错。为什么？

我对第一个缩略图(左上角)有这个问题。当我单击它时，它会显示专辑中的轨道列表(应该如此)，但是当我再次单击它时，当它显示列表时，该列表会再次显示与第一个列表重叠的时间。我已经尝试了一切，站点，turorials 等等，但我似乎无法修复这个错误。请帮忙。

PS.School 元素 - 请放轻松:D

站点代码:

<!DOCTYPE html>
<html>
<head lang="pl">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wu-Tang Dyskografia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <!-- Google Fonts -->

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <!-- CSS -->

    <!-- JavaScript -->
    <script src="javascript/jquery.js"></script>
    <script src="javascript/script.js"></script>
    <!-- JavaScript -->
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <img src="images/logo.jpg"/>
            </div>
        </header>
        <main>
            <div class="mainContainer">
            <article class="album">
                <div>
                    <img src="images/covers/cover1.jpg"/>
                    <span>Enter The Wu-Tang (36 chambers)</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover2.jpg"/>
                    <span>Wu-Tang Forever</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover3.jpg"/>
                    <span>The W</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover4.jpg"/>
                    <span>Iron Flag</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover5.jpg"/>
                    <span>8 Diagrams</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover6.jpg"/>
                    <span>A Better Tomorrow</span>
                </div>
            </article>
        </div>
        </main>
    </div>
</body>
</html>

CSS:

::-webkit-scrollbar {
    display: none;
}
body{
    margin:0;
    padding: 0;
    background-color: black;
    font-family: 'Montserrat', sans-serif;
}
.container{
    width:100%;
    height:100%;
}
header{
    background-color:black;
    width:100%;
    height: 250px;
    text-align: center;
}
header .logo{
    width:100%;
    height: 250px;
}
header .logo img{
    text-align: center;
    margin-top:25px;
    width:250px;
    height:200px;
}
main{
    width:100%;
}
main .mainContainer{
    padding-top:50px;
    max-width:700px;
    height:700px;
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    margin:0 auto;
}
main .mainContainer article{
    width:200px;
    height: 200px;
    text-align: center;
    color:yellow;
}
main .mainContainer article img{
    width:200px;
    height:200px;
}
.textDiv{
    color:yellow;
}

JS:

$(document).ready(function(){

    var $enterTheWuTang = [
        'Bring Da Ruckus',
        'Shame On A Nigga',
        'Clan In Da Front',
        'Wu-Tang: 7th Chamber',
        'Can It Be All So Simple',
        'Da Mystery of Chessboxin',
        'Wu-Tang Clan Aint Nuthing Ta F Wit',
        'C.R.E.A.M.',
        'Method Man',
        'Protect Ya Neck',
        'Tearz',
        'Wu-Tang: 7th Chamber - Part II',
        'Method Man (Skun Mix)',
        'Conclusion'
    ];

    $('.album:nth-child(1)').on('click', function(){
        $('.album:nth-child(1)').removeClass('album');
        $('.album').hide();
        $('.checked').fadeIn(2000);

        $('.mainContainer').append('<div class="textDiv"></div>');

        for(i=0;i<=$enterTheWuTang.length-1;i++){
            $('.textDiv').append('<div class="textAreaDiv">'+ (i+1) + '.' +$enterTheWuTang[i]+'</div>');
        }

    });
});

最佳答案

正如我在评论中提到的，您在错误的地方添加了东西。您需要更新元素的 html，而不是一遍又一遍地附加。

$(document).ready(function(){

    var $enterTheWuTang = [
        'Bring Da Ruckus',
        'Shame On A Nigga',
        'Clan In Da Front',
        'Wu-Tang: 7th Chamber',
        'Can It Be All So Simple',
        'Da Mystery of Chessboxin',
        'Wu-Tang Clan Aint Nuthing Ta F Wit',
        'C.R.E.A.M.',
        'Method Man',
        'Protect Ya Neck',
        'Tearz',
        'Wu-Tang: 7th Chamber - Part II',
        'Method Man (Skun Mix)',
        'Conclusion'
    ];
    
    //UPDATED HERE - ADD THE DIV ONCE AND DON'T KEEP ADDING IT
    $('.mainContainer').append('<div class="textDiv"></div>');
    $('.album:nth-child(1)').on('click', function(){
        $('.album:nth-child(1)').removeClass('album');
        $('.album').hide();
        $('.checked').fadeIn(2000);

        //UPDATED HERE - CREATE A SINGLE DIV ELEMENT TO APPEND TO
        var elemList = $('<div>', {
          class: 'textAreaDiv'
        });
        
        for(i=0;i<=$enterTheWuTang.length-1;i++){
        
        //UPDATED HERE - APPEND THE LIST ELEMENT TO YOUR DIV FROM ABOVE
            $(elemList).append('<div class="textAreaDiv">'+ (i+1) + '.' +$enterTheWuTang[i]+'</div>');
        }
        
        //UPDATED HERE - UPDATE THE HTML FOR THAT DIV.
        $('.textDiv').html(elemList);

    });
});

::-webkit-scrollbar {
    display: none;
}
body{
    margin:0;
    padding: 0;
    background-color: black;
    font-family: 'Montserrat', sans-serif;
}
.container{
    width:100%;
    height:100%;
}
header{
    background-color:black;
    width:100%;
    height: 250px;
    text-align: center;
}
header .logo{
    width:100%;
    height: 250px;
}
header .logo img{
    text-align: center;
    margin-top:25px;
    width:250px;
    height:200px;
}
main{
    width:100%;
}
main .mainContainer{
    padding-top:50px;
    max-width:700px;
    height:700px;
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    margin:0 auto;
}
main .mainContainer article{
    width:200px;
    height: 200px;
    text-align: center;
    color:yellow;
}
main .mainContainer article img{
    width:200px;
    height:200px;
}
.textDiv{
    color:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="pl">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wu-Tang Dyskografia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <!-- Google Fonts -->

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <!-- CSS -->

    <!-- JavaScript -->
    <script src="javascript/jquery.js"></script>
    <script src="javascript/script.js"></script>
    <!-- JavaScript -->
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <img src="images/logo.jpg"/>
            </div>
        </header>
        <main>
            <div class="mainContainer">
            <article class="album">
                <div>
                    <img src="images/covers/cover1.jpg"/>
                    <span>Enter The Wu-Tang (36 chambers)</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover2.jpg"/>
                    <span>Wu-Tang Forever</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover3.jpg"/>
                    <span>The W</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover4.jpg"/>
                    <span>Iron Flag</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover5.jpg"/>
                    <span>8 Diagrams</span>
                </div>
            </article>

            <article class="album">
                <div>
                    <img src="images/covers/cover6.jpg"/>
                    <span>A Better Tomorrow</span>
                </div>
            </article>
        </div>
        </main>
    </div>
</body>
</html>

基本上，我更新了您的点击功能以执行 3 项不同的操作。

在开始附加内容之前添加 div，这样可以防止元素被一遍又一遍地添加。
创建一个我们将附加到的新元素。这将创建一个干净的元素。
将元素添加到 for 循环之外一次，以一劳永逸地附加它。

关于javascript - 多次点击缩略图会使网站出错。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53750856/

javascript - 多次点击缩略图会使网站出错。为什么？

上一篇：javascript - 将元素滚动到容器内的 View 中，但不在浏览器窗口中

下一篇：css - 渐变字体很棒 IN REACT