Jssor滑塊 - 如何複選框添加到拇指圖像

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> 

這是行不通的。它不顯示用戶界面中的複選框。

任何幫助我這個。

Answer 1

見樣品，http://www.jssor.com/testcase/thumbnail-with-checkbox.source.html

請注意以下方式選擇複選框。

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

Answer 2

請務必爲靜態元素添加樣式位置，頂部，左側，寬度，高度。

嘗試下面的代碼，

<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代碼爲您的縮略圖。

---

我檢查了代碼，並使用瀏覽器的「檢查元素」工具檢測到它，您的複選框被其他用戶界面覆蓋。 原因是，縮略圖的「縮略圖導航皮膚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的