Fatal编程技术网
  • javascript/
  • Javascript 为什么JS代码在托管时工作异常？

Javascript 为什么JS代码在托管时工作异常？

javascript

Javascript 为什么JS代码在托管时工作异常？,javascript,hosting,web-hosting,Javascript,Hosting,Web Hosting,我试图创建一个网站，我可以用来上传图像到。我使用下面的代码显示所选文件夹中的所有图像 <script> var folder = "uploads/Chemistry/Acid-Base-Salt/"; $.ajax({ url : folder, success: function (data) { $(data).find("a").attr("href", function

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

 <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>


var folder=“上传/化学/酸碱盐/”；
$.ajax({
url:文件夹，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
如果（val.match（/\（jpe？g | png | gif）$/）{
$（“div”）。追加（“”）；
} 
});
}
});
$（'[data fancybox=“gallery”]'）。fancybox({
循环：对，
按钮：[
“缩放”，
“分享”，
“幻灯片放映”，
“全屏”，
“下载”，
“拇指”，
“结束”
],
动画效果：“放大缩小”
})
当我在ApacheLocalHost上执行此代码时，它工作得非常好，但是，如果我进入托管的网站（我通过域输入），它会列出并显示每个图像两次

整个代码：

        <!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/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/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", function (i, 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",
                "share",
                "slideShow",
                "fullScreen",
                "download",
                "thumbs",
                "close"
            ],
            animationEffect: "zoom-in-out"
        })
        </script>

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


    </body>
    </html>


Yuklemek icin resim sec：
var folder=“上传/化学/酸碱盐/”；
$.ajax({
url:文件夹，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
如果（val.match（/\（jpe？g | png | gif）$/）{
$（“.test”）。追加（“”）；
} 
});
}
});
$（'[data fancybox=“gallery”]'）。fancybox({
循环：对，
按钮：[
“缩放”，
“分享”，
“幻灯片放映”，
“全屏”，
“下载”，
“拇指”，
“结束”
],
动画效果：“放大缩小”
})

$（“div”）.append（…）
将元素附加到页面上的每个
div
元素。在托管页面上可能有多个
div
元素。这是因为javascript解析目录列表，然后为每个锚链接创建img标记。不同的服务器（版本、配置、apache或nginx）可能会输出不同的目录列表页面如何解决此问题？请将浏览器指向
localhost/uploads/Chemistry/Acid Base Salt/
，然后
yourshosting.domain/uploads/Chemistry/Acid Base Salt/
，进行比较them@RalfiBahar不要使用标记选择器（div），而是尝试使用id（推荐）或类选择器