第二次使用后画廊停止工作

Question

因此，我在网站即时通讯中遇到了一个奇怪的问题。 在“关于”页面上，有一个展示一些图片的小画廊。 首次进入页面时，一切都会按预期进行。 现在，假设我退出“关于”页面并转到网站上的任何其他页面，当我再次进入“关于”页面时，它将停止工作。 刷新页面后它将再次起作用，问题再次出现。

这是画廊的建造方式：

HTML：

<div class='about_slide_show' id="about_slide_show">
    <div class="gc_next_arrow">
        <div class="arrow_block">
            <img src="./images/arrow_right.png" alt="" id="au_next" onclick="pic_next(3)">
        </div>          
    </div>
    <div class="gc_prev_arrow">
        <div class="arrow_block">
            <img src="./images/arrow_left.png" alt="" id="au_prev" onclick="pic_prev(1)">
        </div>              
    </div>
</div>

CSS：

.about_slide_show{
    width: 50%;
    min-width: 650px;
    height: 50%;
    margin: 20px auto 20px auto;
    background-color: #fafafa;
    box-shadow: 0px 5px 10px #cacaca;
    background-image: url('./images/about/2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.gc_next_arrow{
    position: absolute;
    top: 45%;
    right: 0;
}
.gc_prev_arrow{
    position: absolute;
    top: 45%;
    left: 0;
}

.arrow_block{
    color: #000;
    width: 50px;
    height: 50px;
    margin: 0 10px 0 10px;
    background-color: #000;
    border-radius: 120px;
    opacity: 0.8;
}

JavaScript：

<script>
var ext_numbers,
    pic_files,
    max_value;
    $(document).ready(function(){       
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                if(xmlhttp.responseText){
                    xml_data = xmlhttp.responseText;
                    xml_data1 = xml_data.split("/");
                    ext_numbers = xml_data1['1'].split("+");
                    pic_files = xml_data1['0'].split("+");
                    max_value = Number(pic_files['0']);
                    document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files['2']+"')";
                }
                else{

                }
            }                                               
            else{

            }
        };
        xmlhttp.open("POST",'check_about.php',false);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send();
    });
    function pic_next(nid){
        if(Number(nid) <= max_value){
            $("#about_slide_show").fadeOut(50,function(){
                document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files[Number(nid)]+"')";
                $("#about_slide_show").fadeIn(250,function(){
                    document.getElementById("au_prev").onclick = function(){pic_prev(ext_numbers[Number(nid) - 1]);};
                    document.getElementById("au_next").onclick = function(){pic_next(ext_numbers[Number(nid) + 1]);};
                });
            });
        }
    }
    function pic_prev(pid){
        if(pid > 1){
            $("#about_slide_show").fadeOut(50,function(){
                document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files[Number(pid)]+"')";
                $("#about_slide_show").fadeIn(250,function(){
                    document.getElementById("au_prev").onclick = function(){pic_prev(ext_numbers[Number(pid) - 1]);};
                    document.getElementById("au_next").onclick = function(){pic_next(ext_numbers[Number(pid) + 1]);};
                });
            });
        }
        else if(pid == 1){
            $("#about_slide_show").fadeOut(50,function(){
                document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files[Number(pid)]+"')";
                $("#about_slide_show").fadeIn(250,function(){
                    document.getElementById("au_prev").onclick = function(){};
                    document.getElementById("au_next").onclick = function(){pic_next(ext_numbers[Number(pid) + 1]);};
                });
            });
        }
    }
</script>

PHP：

<?php
    $folder_path = "./images/about/";
    $files = preg_grep('/^([^.])/', scandir($folder_path));
    $sort_flags = 1;
    sort($files,$sort_flags);   
    echo count($files);
    foreach ($files as $key => $value) {
        echo '+'.$value;
    }
    echo '/null';
    foreach ($files as $key => $value) {
        $temp_files = explode(".", $value);
        echo "+".$temp_files['0'];      
    }
?>

$(document).ready函数内部的AJAX调用仅获取一个字符串，其中包含about文件夹中的图片数量，图片文件名及其名称，不带扩展名。 AJAX调用返回的字符串如下所示：

2 + 1.jpg + 2.jpg / null + 1 + 2

然后，我只是断开字符串并将其插入数组。

之后的JavaScript仅用于浏览图库（下一张和上一张）。

任何人都可以知道为什么我有这个问题吗？ 如有必要，我将提供任何其他信息。

谢谢。

Answer 1

好吧，似乎删除$(document).ready函数可以解决它。

所以代替：

$(document).ready(function(){       
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            if(xmlhttp.responseText){
                xml_data = xmlhttp.responseText;
                xml_data1 = xml_data.split("/");
                ext_numbers = xml_data1['1'].split("+");
                pic_files = xml_data1['0'].split("+");
                max_value = Number(pic_files['0']);
                document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files['2']+"')";
            }
            else{

            }
        }                                               
        else{

        }
    };
    xmlhttp.open("POST",'check_about.php',false);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send();
});

我用这个：

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        if(xmlhttp.responseText){
            xml_data = xmlhttp.responseText;
            xml_data1 = xml_data.split("/");
            ext_numbers = xml_data1['1'].split("+");
            pic_files = xml_data1['0'].split("+");
            max_value = Number(pic_files['0']);
            document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files['2']+"')";
        }
        else{

        }
    }                                               
    else{

    }
};
xmlhttp.open("POST",'check_about.php',false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

我认为在AJAX调用之后HTML正在加载，并且尚未设置所有变量。