1

如何为每个拇指图像添加一个复选框

<div u="slides" style="cursor: move; position: absolute; left: 140px; top: 20px; width: 410px; height: 450px; overflow: hidden;">
    <div>   
        <input type="checkbox" id="chk1" />           
        <img u="image" src="../img/travel/01.jpg" />
        <img u="thumb" src="../img/travel/thumb-01.jpg" />
    </div>
    <div>              
        <input type="checkbox" id="chk2" />           
        <img u="image" src="../img/travel/02.jpg" />
        <img u="thumb" src="../img/travel/thumb-02.jpg" />
    </div>
</div>

它不工作。它不会在 UI 中显示复选框。

任何人都可以帮我解决这个问题。

4

2 回答 2

0

请始终为静态元素添加样式位置、顶部、左侧、宽度、高度。

试试下面的代码，

<div u="slides" style="cursor: move; position: absolute; left: 140px; top: 20px; width: 410px; height: 450px; overflow: hidden;">
    <div>           
        <img u="image" src="../img/travel/01.jpg" />
        <div u="thumb" style="background-image: url(../img/travel/thumb-01.jpg);" >
            <input type="checkbox" id="chk1" style="position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; />
        </div>
    </div>
    <div>              
        <img u="image" src="../img/travel/02.jpg" />
        <div u="thumb" style="background-image: url(../img/travel/thumb-02.jpg);" >
            <input type="checkbox" id="chk2" style="position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; />
        </div>
    </div>
</div>

顺便说一句，您可以为缩略图使用任何 html 代码。

我检查了代码并使用浏览器的“检查元素”工具检测到它，您的复选框被其他用户界面覆盖。原因是'Thumbnail Navigator Skin 02'中的缩略图原型如下，

            <div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;">
                <div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
                <div class=c>
                </div>
            </div>

我使用以下缩略图导航器皮肤进行了检查和测试，它工作正常。

皮肤\thumbnail-07.source.html

皮肤\thumbnail-08.source.html

皮肤\thumbnail-11.source.html

皮肤\thumbnail-12.source.html

于 2014-05-15T10:27:08.060 回答
0

查看示例，http://www.jssor.com/testcase/thumbnail-with-checkbox.source.html

请注意以下方式来选择您的复选框。

        var thumbnailNavigatorContainer = $(".jssort07");
        var checkbox01 = thumbnailNavigatorContainer.find(".chk01");
于 2014-05-16T13:36:11.307 回答