Question

我是Jquery的新手。我正在尝试动态地在文档上打印文本。我有一个JavaScript函数，应该使用jQuery prettyphoto插件显示图像。我的功能不显示图像，但是当我将代码粘贴到html文件上时，它可以正常工作。请帮忙。我的代码示例就在这里。

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" href="./index.css" type="text/css">
    <script type="text/javascript" charset="utf-8" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="spin.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="custom-functions.js"></script>
    <link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
    <script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>

    <script type="text/javascript">
    $(document).ready(function()
    {
    $("a[rel^='prettyPhoto_related-content-images']").prettyPhoto({theme:'facebook'});
    });

 function showImages()
    {
    var stringData = '';

    stringData = stringData + '<div id="related-content-images" >Related to this: <br/>'+
    '<a href="images/sample-album-2.jpg" target="" rel="prettyPhoto_related-content-images[related-content-images]" title=""><img id="not-hidden" src="images/sample-album-2.jpg" alt="" title=""></a>'+
    '<a href="images/sample-album-3.jpg" target="" rel="prettyPhoto_related-content-images[related-content-images]" title=""><img id="related-images" src="images/sample-album-3.jpg" alt="" title=""></a>'+
    '<a href="images/sample-album-4.jpg" target="" rel="prettyPhoto_related-content-images[related-content-images]" title=""><img id="related-images" src="images/sample-album-4.jpg" alt="" title=""></a></div>';
    document.getElementById("content").innerHTML=''+stringData+'';
    }
    </script>

    </head>
    <body>
    <div id="header"><div id="app-logo-image">
    <img src="images/app-logo.png" id="app-logo"/></div>
    <div id="header-form">
    <input type="search" id="search-text-box" name="search-text-box" placeholder="Search">
    <input type="submit" id="search-button" name="" value="Search">
    </div>
    </div>
    <div id="container">
    <div id="sub-header-menu">
    <div id="music-albums">
    <img src="images/music-albums-icon.png" id="music-albums-image"; onclick="fetch('music-albums');"/></div>
    <div id="genres-icon">
    <img src="images/genres-icon.png" id="genres-icon-image"onclick="fetch('music-genres');"/></div>
    <div id="artist-icon">
    <img src="images/artists-icon.png" id="artist-icon-image"onclick="fetch('music-artists');"/></div>
    <div id="home-icon">
    <img src="images/home-button.png" id="home-icon-image"/></div>
    </div>
    <div id="content" style="left:0%;">
    <a href="#" onclick="showImages();">click me</a>
    </div>
    </div>
    </body>
    </html>

Answer 1

在单击链接之前，您的showImages函数不会执行，但prettyPhoto初始化仅在文档完成加载时运行一次，并且showImages尚未运行然而prettyPhotos无法找到并增强这些图像。

如果你将它添加到showImages的末尾，一切都应该有效：

$('#content a').prettyPhoto({theme:'facebook'});

自定义函数没有显示JQuery插件

1 个答案: