我正在為我的 symfony 課程做一個專案，我使用 webpack 和“slidejs”庫來制作輪播。在我使用 splide 的頁面上一切正常，但在未使用它的其他頁面上，我在控制臺中收到一條錯誤訊息，我的所有其余 javascript 都不再作業
錯誤：https ://i.stack.imgur.com/x21fr.png
我正在將 splide.js 檔案匯入到我的 app.js 中，我的 splide 配置如下所示
// Splide
// Last news
import Splide from '@splidejs/splide';
let splideEvents = new Splide( '#splideEvents', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
} );
splideEvents.mount();
let splideNews = new Splide( '#splideNews', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
} );
splideNews.mount();
let splideReleases = new Splide('#splideReleases', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
})
splideReleases.mount();
任何想法如何解決這個問題？
uj5u.com熱心網友回復：
您需要檢查您的元素是否存在于 dom 中：
if(document.querySelector('#splideEvents')) {
let splideEvents = new Splide( '#splideEvents', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
} );
}
如果不是，你什么也不做，因為頁面中沒有幻燈片
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/481409.html
標籤：javascript 交响乐 网页包 幻灯片
上一篇：React-無法讀取null的屬性（“讀取useState”）錯誤
下一篇：基礎資料更改時防止更改下拉選項