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代码总是给我＆＃34; 1＆＃34;结果。所以它只获得第一个元素。为什么会这样？如果不使用光滑的滑块，它显然工作正常，那么非常简单的代码就会出现问题......

我是否遗漏了一些光滑的滑块？我阅读了所有内容和所有文档但我无法找到解决此问题的任何内容。我也曾尝试过改变事件，但没有工作。

由于

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”。

无法访问光滑滑块

1 个答案: