0

我是 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>
4

1 回答 1

0

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

如果将其添加到showImages所有内容的末尾，则应该可以：

$('#content a').prettyPhoto({theme:'facebook'});
于 2012-09-05T07:41:27.327 回答