隐藏或删除未找到的图像 $("img").error(function()

Question

在我的页面中，我可以有尚未上传或被错误删除的图片，所以我正在寻找可以删除或隐藏有关未找到我的 img 源的警告的东西？

您可以在此处或此处查看我的代码 link ->

http://www.booclin.ovh/tom/2/

这是我的代码

$("img").error(function() {
  $(this).parent().remove();
});

$("a.fancyboxgallery").fancybox();

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>
    

    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>

Answer 1

您在控制台中遇到的错误：$ is not defined 意思是 jQuery 未加载。

您将其加载到 <body> 内的 <div class="rightpart"> 内。

尝试在 <head> 之前加载它：<script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

编辑

这是你的 HTML 为你的 live link 的代码检查员复制的：

<html lang="en" class="js backgroundsize"><!--<![endif]-->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <link property="stylesheet" rel="stylesheet" type="text/css" href="index/css/style.css" class="--apng-checked">

        <link property="stylesheet" rel="stylesheet" type="text/css" href="index/font/font.css" class="--apng-checked">

        <link rel="stylesheet" type="text/css" media="screen" href="index/css/jquery.fancybox.css" class="--apng-checked">

        <link rel="stylesheet" media="screen" href="index/js/jquery.fancybox.css" type="text/css" class="--apng-checked">

        <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

        <script type="text/javascript" src="index/js/fancybox.js"></script>

        <style type="text/css" class="--apng-checked">.fancybox-margin{margin-right:0px;}</style>
    </head>

    <body>

        <div class="leftpart">
            <a href="#">PROJECT</a>
        </div>

        <div class="rightpart">
            <div id="globalgalerie">


                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="">
                </a>

                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="">
                </a>

                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="">
                </a>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

        <script type="text/javascript" src="index/js/modernizr.custom.js"></script>

        <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

        <script type="text/javascript" src="index/js/fancybox.js"></script>

        <script type="text/javascript">
            $("img").error(function() { $(this).parent().remove(); });
            $("a.fancyboxgallery").fancybox();
        </script>   

    </body>
</html>

所以我的意思是在 <head> 部分移动这些行：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript" src="index/js/modernizr.custom.js"></script>

<script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

<script type="text/javascript" src="index/js/fancybox.js"></script>

这些已经在 <head>... 无需复制它们。

<script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

<script type="text/javascript" src="index/js/fancybox.js"></script>

你的错误函数在 <body> 结束时没问题。

隐藏或删除未找到的图像 $("img").error(function()

hide or delete image not found with $("img").error(function()

html

javascript

jquery

fancybox

fancybox-2