Question

这是我的exibitview.html页面

<!DOCTYPE html>
    <html lang="en" manifest="health.cache">
    <head>
    <meta http-equiv="cache-control" content="no-cache" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>Video Campaign View</title>
    <link rel="stylesheet" href="Styles/jquery-mobile.css" />
    <link rel="stylesheet" href="Styles/base.css" />
    <link rel="stylesheet" media="all and (orientation:portrait)" href="Styles/portrait.css" />
    <link rel="stylesheet" media="all and (orientation:landscape)" href="Styles/landscape.css" />
    <script src="Scripts/jquery-1.7.2.min.js"></script>
    <script src="Scripts/jquery-mobile-old.js"></script>
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript" src="Scripts/ajaxExhibitXmlParser.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/easypaginate.js"></script>
    </head>
    <body>
        <header>
            <h2>My Campaign Home Page</h2>
        </header>
        <div id="section_main">
            <article class="main-content">
                <ul class="exihibit">
                </ul>
            </article>
        </div>
    </body>
    </html>

这是我的ajaxExhibitXmlParser.js

$(document).ready(function(){
        $.ajax({
            type: "GET",
            //url: "5_section_nature-1.xml",
            url: "xmls/exhibit.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('exhibits').each(function(){
                    $(this).find('exihibit').each(function(){

                    var vmediaurl = $(this).find('redirecturl').text();
                    var mediaurl =  vmediaurl ;
                    var medianame = $(this).find('name').text();
                    var mediadesc = $(this).find('description').text();
                    var vmediathumbnail = $(this).find('icon').text();
                    var mediathumbnail ="'" + vmediathumbnail + "'";
                    localStorage.setItem(vmediathumbnail, vmediathumbnail);
                    localStorage.setItem(mediathumbnail, mediathumbnail);
                    localStorage.setItem(mediaurl, mediaurl);
                    localStorage.setItem(medianame, medianame);
                    localStorage.setItem(mediadesc, mediadesc);



                        $('<li></li>').html('<a href="http://localhost:8080/PatientsHealth/Images/ajax-loader.gif"><img width="300" height="250" src='+localStorage.getItem(mediathumbnail)+' alt="poster image"><span class="exihibit"><p>'+localStorage.getItem(medianame)+'</p><p>'+localStorage.getItem(mediadesc)+'</p></span></a>').appendTo('ul.exihibit');
                    });

                });
                jQuery(function($){

                    $('ul').easyPaginate({
                        step:2
                    });

                });

            }
        });

当我点击exihibitview.html页面的图像时，如果我使用F5刷新页面，我会收到错误，因为我能够获取图像。任何一个人都可以帮我解决这个问题。

Answer 1

这条线对我来说不合适：

$('<li></li>').html('<a href="http://localhost....gif"><img width="300" height="250" src='+localStorage.getItem(mediathumbnail)+' alt="poster image"><span class="exihibit"><p>'+localStorage.getItem(medianame)+'</p><p>'+localStorage.getItem(mediadesc)+'</p></span></a>').appendTo('ul.exihibit');

在jQuery中，我很确定你不能用$('<li></li>')选择列表项。您必须使用类似$('li')的内容。

此外，在paragraph内部span在语义上并不是一个好主意。

看起来你正试图做这样的事情：

$('ul.exhibit').append('<li><a href="..."><img src="..." alt="..." /></a></li>');

Answer 2

在标签中使用rel =“external”

$('ul.exhibit').append('<li><a rel="external" href="..."><img src="..." alt="..." /></a></li>');

使用<a href=""></a>时将输出视为未定义

2 个答案: