Question

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

<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中的复选框。

可以帮助我。

Answer 1

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

尝试以下代码，

<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代码作为你的缩略图。

我检查了代码并使用浏览器的'inspect element'工具检测到它，你的复选框被其他ui覆盖。原因是“缩略图导航器皮肤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>

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

皮肤\缩略图07.source.html

皮肤\缩略图08.source.html

皮肤\缩略图11.source.html

皮肤\缩略图12.source.html

Answer 2

参见示例http://www.jssor.com/testcase/thumbnail-with-checkbox.source.html

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

        var thumbnailNavigatorContainer = $(".jssort07");
        var checkbox01 = thumbnailNavigatorContainer.find(".chk01");

Jssor Slider - 如何向拇指图像添加复选框

2 个答案: