托管时，为什么JS代码会荒唐地工作？

编程问答 2022-06-13

问题描述

我试图创建一个网站，可以用来将图片上传到该网站。我使用下面的代码在所选文件夹中显示所有图像。

 <script>
    var folder = "uploads/Chemistry/Acid-Base-Salt/";

$.ajax({
    url : folder,success: function (data) {
        $(data).find("a").attr("href",function (i,val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
               
                $("div").append( "<a data-fancybox='gallery' href='"+ folder + val +"' data-caption='"+ val +"'' data-width='300' data-height='600'> <img src='"+ folder + val+"' width='300' height='600'/> </a>" );
            } 
        });
    }
});

$('[data-fancybox="gallery"]').fancybox({
    loop:true,buttons: [
        "zoom","share","slideShow","fullScreen","download","thumbs","close"
    ],animationEffect: "zoom-in-out"
})
</script>

当我在Apache localhost上执行此代码时，它可以正常工作，但是，如果我进入托管的网站（由域输入），它将列出并显示两次图像。

整个代码：

        <!DOCTYPE html>
    <html>
        <head>
            <!-- 1. Add latest jQuery and fancybox files -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
        </head>
    <body>

    <!--<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
        <img src="thumbnail_1.jpg" alt="" />
    </a>-->

    <form action="acid-base-salt.php" method="post" enctype="multipart/form-data">
    Yuklemek icin resim sec:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Et" name="submit">
    </form>
        <script>
            var folder = "uploads/Chemistry/Acid-Base-Salt/";
        
        $.ajax({
            url : folder,success: function (data) {
                $(data).find("a").attr("href",val) {
                    if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                    
                        $(".test").append( "<a data-fancybox='gallery' href='"+ folder + val +"' data-caption='"+ val +"'' data-width='300' data-height='600'> <img src='"+ folder + val+"' width='300' height='600'/> </a>" );
                    } 
                });
            }
        });

        $('[data-fancybox="gallery"]').fancybox({
            loop:true,buttons: [
                "zoom","close"
            ],animationEffect: "zoom-in-out"
        })
        </script>

    <div class="test"></div>


    </body>
    </html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

hostingjavascriptweb-hosting