無法訪問滑動滑塊內的元素

我使用滑動滑塊（http://kenwheeler.github.io/slick/），並試圖獲取我更改的元素的ID。下面的代碼顯然適用於滑動滑塊，但由於某種奇怪的原因，它總是返回滑塊的第一個元素。無法訪問滑動滑塊內的元素

 <div class="container-slide"> 
      <div class="slider slider-category"> 
      <div class="slider-card"> 
       <div class="row block-image"> 
        <div class="background-upload"> 
         <label for="image"> 
          <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
         </label> 

         <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/> 
        </div>      
       </div>  

      </div> 

      <div class="slider-card"> 
       <div class="row block-image"> 
        <div class="background-upload"> 
         <label for="image"> 
          <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
         </label> 

         <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/> 
        </div>      
       </div>  

      </div> 

     </div> 
     </div> 


$('.image-card').on('change', function() { 
    console.log($(this).data('id')); 

});

以前的jQuery代碼給我總是「1」作爲結果。所以它只獲得第一個元素。這是怎麼回事？沒有使用光滑的滑塊，它顯然工作正常，沒有什麼不對的那個非常簡單的代碼...

我缺少一些關於滑動滑塊嗎？我閱讀了所有文檔，但我無法找到任何有關此問題的信息。我也嘗試過更改事件，但沒有奏效。

謝謝

來源

2017-06-25 myh34d

JQuery代碼似乎在放入JSFiddle時有效 – KyleS

您是否添加了slickslider js？我可以看到您的jsfiddle嗎？ – myh34d

好的我發現了問題！

我不知道爲什麼，但ID和標籤影響着變化。

所以，如果我改變代碼到這一點：

<div class="container-slide"> 
     <div class="slider slider-category"> 
     <div class="slider-card"> 
      <div class="row block-image"> 
       <div class="background-upload"> 
        <label for="image"> 
         <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
        </label> 

        <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/> 
       </div>      
      </div>  

     </div> 

     <div class="slider-card"> 
      <div class="row block-image"> 
       <div class="background-upload"> 
        <label for="image2"> 
         <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
        </label> 

        <input id="image2" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/> 
       </div>      
      </div>  

     </div> 

    </div> 
    </div>

它工作正常。（我將輸入的id和標籤改爲「image2」）

來源

2017-06-25 17:31:02 myh34d

無法訪問滑動滑塊內的元素

回答

相關問題