Question

我正在尝试使用HTML中的jquery制作可排序的图像。这里的来源有什么问题？我在functions.js文件中定义了jquery可排序函数，并在此页面上用文本对其进行了测试，所以我知道它有效。但我不能让它与图像的div和它们各自的标题一起工作。我是否必须以某种方式为图像div设置CSS？

这是来源。请参阅可排序div的“可排序”，它围绕图像div。

<html xmlns:exist="http://exist.sourceforge.net/NS/exist">
    <head>
        <title>William Blake Archive Comparison of The First Book of Urizen (1794): electronic edition</title>
        <script src="/blake/applets/lightbox/lb.js"></script>
        <link rel="stylesheet" type="text/css" href="/blake/style.css" />
        <link rel="stylesheet" type="text/css" href="/blake/slider.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
        <script src="/blake/jQueryRotate.2.1.js" type="text/javascript"></script>
        <script src="/blake/binaryajax.js" type="text/javascript"></script>
        <script src="/blake/imageinfo.js" type="text/javascript"></script>
        <script src="/blake/exif.js" type="text/javascript"></script>
        <script src="/blake/accessibleUISlider.jQuery.js" type="text/javascript"></script>
        <script src="/blake/functions.js"></script>
        <style type="text/css"></style>
        <meta lang="en" />
        <script type="text/javascript"></script>
        <link rel="meta" type="application/rdf xml" href="/exist/blake/archive/rdf.xq?req=&amp;mode=obj" />
    </head>
    <body onLoad="window.name=''">
        <div>
            <table cellpadding="25" style="width:auto;" id="comparison">
                <tr>
                    <div id="sortable" class="ui-state-default">
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>The Book of Urizen,   copy G,  
c. 1818 (Library of Congress): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=urizen.g.illbk.21&amp;java=no" target="wbamain">object 21 (Bentley 21, Erdman 21, Keynes 21)</a>
                                </p>
                                <img src="/blake/images/urizen.g.p21.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.g')">
                                        <span style="font-size:smaller">©<date>1998</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>The First Book of Urizen,   copy B,  
1795 (Morgan Library and Museum): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=urizen.b.illbk.23&amp;java=no" target="wbamain">object 23 (Bentley 21, Erdman 21, Keynes 21)</a>
                                </p>
                                <img src="/blake/images/urizen.b.p23-21.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.b')">
                                        <span style="font-size:smaller">©<date>2003</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>A Large Book of Designs,  copy A,  
1796 (British Museum): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=bb85.a.spb.02&amp;java=no" target="wbamain">object 2 (Bentley 85.2, Butlin 262.3)</a>
                                </p>
                                <img src="/blake/images/bb85.a.2.ps.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=bb85.a')">
                                        <span style="font-size:smaller">©<date>2012</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                    </div>
                </tr>
            </table>
        </div>
        <p>
            <script language="JavaScript">
                        datestamp( );   
                </script>
        </p>
    </body>
</html>

Answer 1

您需要将id分配给tr，将班级分配给td

DEMO jsFiddle

$(function(){
    $('#comparison').sortable();
})

在HTML中使用jquery排序的可排序图像

1 个答案: