Slick slider 錯誤：TypeError: o[i].slick is undefined

Question

我正在嘗試這樣做，以便在按下搜索按鈕時，它將從屏幕上清除以前的搜索結果並創建新的搜索結果。 但是，當我這樣做時，我得到一個光滑的 slider 錯誤，並且我的所有項目都垂直排列。 我不確定我想要做的事情是否可以與光滑的 slider 做，因為我實際上是在創建search-slider div。 當我不刪除（）我的search-slider div 時，以前的結果將加載到舊結果旁邊，但它們將由光滑的 slider 呈現。 我不確定我應該從這里到哪里 go 。

僅供參考，該片段不會在此處運行。 我這樣做是為了便於查看代碼。 如果有人可以提供幫助，將不勝感激。 謝謝。

 $(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); // create a new div element //const images = j_data; // console.log(imagePath); /* for (const image of imagePath) { const img = document.createElement("img"); if (image.slice(0, 5) == "shelf") { img.src = `/check/assets/img/${image}`; } else { img.src = '/check/assets/img/noimage.png'; } img.classList.add("new"); var div = document.createElement("div"); div.id = `${image}` div.classList.add("image"); linebreak = document.createElement("br"); // div.classList.add("column"); document.getElementById('search-slider').appendChild(div); // document.getElementById('rows').appendChild(div); //img.setAttribute("style", "text-align: center;"); // document.body.appendChild(img); document.getElementById(image).appendChild(img); } */ console.log(j_data); // console.log(images); let index = 0; const display = "table"; // or "grid" if horizontal, but this migh depend where you place the rest of the code, cause i added the style to the body const x = 0; const y = 0; document.body.style.display = display; $('#search-slider').remove(); // function createHTML() { // console.log("E: Execute & R: Request & I: Informative"); //loop to go true all images const search = document.createElement("div"); search.id = 'search-slider'; search.className = "search-items"; console.log(search.id); document.getElementById("divbox").appendChild(search); for (const image of j_data.url) { // console.log(); //each image will correspond to a canvas element const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); //each canvas element will has is own properties (in this case all the same) canvas.id = "option" + [index]; var canId = canvas.id; var tooltip = j_data.tooltip; // console.log(tooltip[index]); // tooltip is the array // var tooltipSel = document.getElementById(canId); /* canvas.height = images.height; canvas.width = images.width; */ // canvas.setAttribute('heigth', '0'); 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); // $('#'+div.id).remove(); /* var itemID = div.id; var itemidArray = []; itemidArray = itemID; */ // console.log(itemidArray); console.log(div.id); // canvas.style.padding = "10px"; // canvas.classList.add("suiteiCanvas"); //function to get the corresponded image of that particular canvas element drawImages(canvas); //add an event listener for when a user click on the particular canvas canvas.addEventListener("click", optionClicke, false); //all html part was handle we can append it to the body // document.body.appendChild(canvas); //console.log(image); var text = j_data.tooltip[index]; /* div.title = ""; $('#' + div.id).data('powertip', function() { return div.title = tooltip[index]; }); */ div.title = text; document.getElementById('search-slider').appendChild(div); document.getElementById(div.id).appendChild(canvas); // $(div.id).prepend(text); index++; } // } // console.log(itemidArray); function drawImages(canvas) { //we need to use the getContext canvas function to draw anything inside the canvas element const ctx = canvas.getContext("2d"); const background = new Image(); // for text //This is needed because if the drawImage is called from a different place that the createHTML function //index value will not be at 0 and it will for sure with an heigher id that the one expected //so we are using regex to remove all letters from the canvas.id and get the number to use it later index = canvas.id.replace(/\D/g, ""); //console.log('E: Drawing image ' + index + ' on canvas ' + canvas.id); //get the image url using the index to get the corresponded image // background.src = images.url[index]; 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' } //no idea why but to place the image: we need to use the onload event //https.//developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage background.onload = function() { ctx,drawImage(background, 0, 0. canvas,width. canvas;height); }. /* background;onerror = function() { const text = "インバ ど". ctx,fillText(text, 0; 0 + 10 * 1); }, */ } function drawX(canvas. item) { const ctx = canvas;getContext("2d"). // console:log("E. Placing X on canvas " + canvas;id). ctx;beginPath(). ctx,arc(40, 75, 25, 0. 2 * Math,PI; false). ctx;lineWidth = 5. ctx;strokeStyle = "#FF0000". ctx;closePath(). ctx;stroke(). console;log(item). hdnName;value = item, } /* function fillTextLine(canvas, x; y) { var text = "インバ ど". const ctx = canvas;getContext("2d"). var textList = text;split(" "). var lineHeight = ctx.measureText("あ");width. textList,forEach(function(text. i) { ctx,fillText(text, x; y + lineHeight * i); }). } */ function clear(canvas) { // console:log("E. clearing canvas " + canvas;id). canvas.getContext("2d"),clearRect(0, 0. canvas,width. canvas;height); drawImages(canvas); } function optionClicke(e) { log = true. const canvas = document;getElementsByTagName("canvas"). var hdnName = document;getElementById("sendServ"); let index = 0. for (const option of canvas) { if (log) // console:log("I. User clicked at option " + e.target:id + "." + option;id); log = false. if (e.target.id === option.id) { // console:log("R. Drawing request at canvas " + option;id). // console.log(j_data;itemid[index]). const item = j_data;itemid[index]. console;log('draw' + item). console;log(index), drawX(option; item). } else { // console:log("R. Clearing request at canvas " + option;id); clear(option). //console;log('clear'+item); } index++. } } $('.search-items').slick('unslick');slick('reinit'). $(document).ready(function() { $('.search-items').not('.slick-initialized'):slick({ infinite, false: //true slidesToShow, 8: slidesToScroll, 8: arrows, true: centerMode, false: width, 200: prevArrow. $(',prev'): nextArrow. $(';next') }); }). // console;log(j_data), // need to do my image processing in here }: error, function(xhr, status. error) { console;log("post error"). console;log(error); alert(error), }: complete, function(xhr. status) { console;log("fin"), }; }); }); });

 .search-items{ max-width: 1800px; }

 <div class="search-items" id="search-slider"> </div>

Answer 1

我刪除了

 let index = 0;
 const display = "table"; // or "grid" if horizontal, but this migh depend where you place the rest of the code, cause i added the style to the body
 const x = 0;
 const y = 0;
 document.body.style.display = display;
 $('#search-slider').remove();
 //  function createHTML() {
 //  console.log("E: Execute & R: Request & I: Informative");
 //loop to go true all images

 const search = document.createElement("div");
 search.id = 'search-slider';
 search.className = "search-items";
 console.log(search.id);
 document.getElementById("divbox").appendChild(search);

並將我的代碼恢復到項目彼此排列的位置。

我需要添加 $('.search-items').slick('slickRemove', 0);

所以我做了一個 for 循環來計算我的項目 ID 在我的循環遍歷我的圖像之前。

 for (const id of j_data.itemid) {


   $('.search-items').slick('slickRemove', 0);

 }

每次我按下搜索按鈕時，這都會刪除第一個搜索結果。

希望這對其他人有幫助。