slick.js 中的错误:“未捕获的类型错误:无法读取 null 的属性“添加"" [英] Error in slick.js: "Uncaught TypeError: Cannot read property 'add' of null"
问题描述
我使用 slick js 来实现图像的滑块视图.
这是我的代码.
<div class="slider_wrap add-remove"><%= f.fields_for :图像做 |image_form|%><%#= 渲染'images_fields', :f =>image_form %><%= image_tag image_form.object.picture.url,:class=>"drop_down_link even img_prev" %></div><div class="image_upload_div"><div class="图片上传"><标签><i class="fa fa-cloud-upload"><%= image_form.file_field :picture ,:'data-role'=>"none",:onchange=>"readURL(this);", : 接受 =>'图片/jpeg , 图片/png' %></我></标签></div></div><%结束%><%= f.link_to_add "添加图片", :images ,:id=>"add_pic" ,:class=>"js-add-slide", :style=>"display: none;"%></div><脚本>函数silder(){幻灯片索引 = 0;$('.add-remove').slick({幻灯片显示:2,slidesToScroll: 2});$('.js-add-slide').on('click', function() {$('.add-remove').slick('slickAdd');});$('.js-remove-slide').on('click', function() {$('.add-remove').slick('slickRemove');});});函数读取URL(输入){if (input.files && input.files[0]) {var reader = new FileReader();reader.onload = 函数 (e) {$('.img_prev').last().attr('src', e.target.result)};reader.readAsDataURL(input.files[0]);设置超时(函数(){$('#add_pic').trigger('点击');西尔德();}, 100);}}</脚本>现在有了这段代码,我让滑块工作了,但它不正确,我收到错误:
<块引用>未捕获的类型错误:无法读取 null 的属性添加"
解决方案 这是由于 两次调用init.这没有错误:
$(".slider").not('.slick-initialized').slick()
另外,silder"看起来像是一个错字.
依赖超时也容易出错.不幸的是,Internet Explorer 使用不同的事件来告诉您何时HTML 元素和 JS 库已经加载完毕. 有很多库可以避免 100 行左右的跨浏览器代码,但是流行且相对较小的 jQuery 解决了这样的计时问题:
$(function() {//.ready() 的处理程序被调用.将 Slick Slider 等初始化代码放在这里.})
I used slick js for slider view of image.
Here is my code.
<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>
Now with this code I got slider working, but its not coming proper I am getting error:
Uncaught TypeError: Cannot read property 'add' of null
解决方案 That's due to calling init twice. This works without error:
$(".slider").not('.slick-initialized').slick()
Also, "silder" looks like a typo.
Relying on a timeout is also error-prone. Unfortunately, Internet Explorer uses a different event to tell you when the HTML elements and JS libraries have been loaded. There are many libraries to avoid the 100 or so lines of cross-browser code, but the popular and relatively small jQuery solves the timing issue like this:
$(function() {
// Handler for .ready() called. Put the Slick Slider etc. init code here.
})
这篇关于slick.js 中的错误:“未捕获的类型错误:无法读取 null 的属性“添加""的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文