无法访问光滑滑块内的元素

Question

我正在使用Slick滑块（ 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”。 因此，它仅获得第一个元素。 为什么会这样呢？ 不使用光滑的滑块，显然可以正常工作，非常简单的代码没有任何问题...

我是否缺少有关滑动滑块的信息？ 我阅读了所有内容和所有文档，但找不到与此问题有关的任何内容。 我也尝试了beforeChange事件，但是没有用。

谢谢

Answer 1

好的，我发现了问题！

我不知道为什么，但是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”）。