我有一个ajax调用，它从后端获取数据。我使用数据绘制画布”，然后将它们放到幻灯片中。当我按搜索按钮时，它将得到我选择的结果数量。但是，当减少显示结果的数量时，例如，我首先将搜索范围限制为20，然后限制为10，画布的div开始翻倍，并且容易发生奇怪的事情。
我尝试使用以下内容尝试在发出新请求时重置滑块。
$('.search').on('click',function () {
slickReset.slick('setPosition');
});
什么也没发生。我不知道如何正确显示幻灯片。
下面是我的代码段。这是一个gif，可帮助您理解我要说的内容。 https://imgur.com/a/fK9nC6G
感谢您的帮助。
编辑：我尝试将$('#search-slider').html("");添加到我的ajax调用的开始。这将第二选择的结果数放在滑块的开头，但是我仍然在这些结果的末尾添加了其他div。
P.S。 该代码段将无法运行，因为它取决于我的后端数据。
$(function() {
$('#search').click(function() {
var nameVal = $('#shouhinName').val();
var makerVal = $('#makerName').val();
var categoryVal = $('#selectText').val();
var sliderVal = $('#hideme').val();
$.ajax({
type: "POST",url: "shelf/test",data: {
shouhinName: nameVal,makerName: makerVal,selectText: categoryVal,best: sliderVal
},success: function hi(j_data) {
alert(j_data.url);
let index = 0;
const display = "table";
const x = 0;
const y = 0;
var hdnName = document.getElementById("sendServ");
document.body.style.display = display;
for (const id of j_data.itemid) {
$('.search-items').slick('slickRemove',0);
}
canvasArr = [];
for (const image of j_data.url) {
const canvas = document.createElement("canvas");
canvas.setattribute("name","canvas");
const ctx = canvas.getcontext("2d");
canvas.id = "option" + [index];
var canId = canvas.id;
var tooltip = j_data.tooltip;
canvas.setattribute('width','75px');
canvas.setattribute('padding-top','56.25%');
canvas.setattribute('object-fit','contain');
canvas.setattribute('data-html','true');
// canvas.title = "hi";
// console.log('#'+ canvas.id);
var div = document.createElement("div");
div.setattribute('data-html','true');
div.id = j_data.itemid[index]; //image.slice(26,34);
drawImages(canvas);
canvas.addEventListener("click",optionClicke,false);
var text = j_data.tooltip[index];
div.title = text;
document.getElementById('search-slider').appendChild(div);
document.getElementById(div.id).appendChild(canvas);
index++;
}
function drawImages(canvas) {
const ctx = canvas.getcontext("2d");
const background = new Image();
index = canvas.id.replace(/\D/g,"");
if (j_data.url[index] !== '/check/assets/img/noimage.png') {
background.src = "/check/assets/img/" + j_data.url[index];
} else {
background.src = '/check/assets/img/noimage.png'
}
background.onload = function() {
ctx.drawImage(background,canvas.width,canvas.height);
};
}
function drawX(canvas,item) {
const ctx = canvas.getcontext("2d");
console.log(canvas.id);
ctx.beginPath();
ctx.arc(40,75,25,2 * Math.PI,false);
ctx.lineWidth = 5;
ctx.strokeStyle = "#FF0000";
ctx.closePath();
ctx.stroke();
console.log(item);
hdnName.value = item;
}
function clear(canvas) {
canvas.getcontext("2d").clearRect(0,canvas.height);
drawImages(canvas);
}
function optionClicke(e) {
log = true;
const canvas = document.getElementsByName("canvas");
var hdnName = document.getElementById("sendServ");
let index = 0;
for (const option of canvas) {
if (log)
log = false;
if (e.target.id === option.id) {
const item = j_data.itemid[index];
console.log('draw' + item);
console.log(index);
drawX(option,item);
} else {
clear(option);
}
index++;
}
}
// need to make the images line up
$('.search-items').slick('unslick').slick('reinit');
$(document).ready(function() {
var slickReset = $('.search-items').not('.slick-initialized').slick({
infinite: false,//true
slidesToShow: 8,slidesToScroll: 8,arrows: true,centerMode: false,width: 200,prevArrow: $('.prev'),nextArrow: $('.next')
});
});
},error: function(xhr,status,error) {
console.log("post error");
console.log(error);
alert(error);
},complete: function(xhr,status) {
console.log("fin");
},});
});
}); <div class="search-items" id="search-slider">