slick.js中的错误:“未捕获的TypeError:无法读取null的属性’add’”

2021/01/10 22:22 · jquery ·  · 0评论

我将光滑的js用于图像的滑块视图。

这是我的代码。

<div class="slider_wrap add-remove">
    <%= f.fields_for :images do |image_form| %>
      <%#= render 'images_fields', :f => image_form %>
        <div>
          <%= image_tag image_form.object.picture.url,:class=>"drop_down_link even img_prev" %>
        </div>
        <div class="image_upload_div">
          <div class="image-upload">
            <label>
              <i class="fa fa-cloud-upload">
                <%= image_form.file_field :picture ,:'data-role'=>"none",:onchange=>"readURL(this);" , :accept => 'image/jpeg , image/png' %>
              </i>
            </label>
          </div>
        </div>
    <% end %>
    <%= f.link_to_add "Add a picture", :images ,:id=>"add_pic" ,:class=>"js-add-slide", :style=>"display: none;"%>
</div>

<script>
function silder(){
    slideIndex = 0;
      $('.add-remove').slick({
        slidesToShow: 2,
        slidesToScroll: 2
      });
      $('.js-add-slide').on('click', function() {
        $('.add-remove').slick('slickAdd');
      });

      $('.js-remove-slide').on('click', function() {
        $('.add-remove').slick('slickRemove');
      });
});
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $('.img_prev').last()
      .attr('src', e.target.result)
    };

    reader.readAsDataURL(input.files[0]);

    setTimeout(function(){
      $('#add_pic').trigger('click');
      silder();
    }, 100);
  }
}
</script>

现在,使用此代码,我可以使用滑块,但是无法正常工作,我遇到了错误:

未捕获的TypeError:无法读取null的属性“ add”

那是由于两次调用了init这可以正常工作:

$(".slider").not('.slick-initialized').slick()

另外,“ silder”看起来像是错字。

依赖超时也容易出错。不幸的是,Internet Explorer使用另一个事件来告诉您何时HTML元素和JS库已加载。有很多库可以避免100行左右的跨浏览器代码,但是流行且相对较小的jQuery解决了如下计时问题:

$(function() {
  // Handler for .ready() called. Put the Slick Slider etc. init code here.
})
本文地址:http://jquery.askforanswer.com/slick-jszhongdecuowuweibuhuodetypeerrorwufaduqunulldeshuxingadd.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!