我的網站上有 2 個兩頁。第 1 頁包含一些影像,第 2 頁包含另外一些影像。當我單擊第 1 頁中的特定影像時,我想更改第 2 頁中的所有影像。我能夠重定向到第 2 頁,但無法使更改產生影響。請幫助。
——第1頁——
<div class="container collections-cont">
<a href="#"><img src="images/collections/b.jpeg" /></a>
<a href="#"><img src="images/collections/c.jpeg" /></a>
<a href="#"><img src="images/collections/d.jpeg" /></a>
<a href="#"><img src="images/collections/e.jpeg" /></a>
</div>
- 第2頁 -
<div class="vertical-suba">
<img src="../images/collections/a.jpeg">
<img src="../images/collections/b.jpeg">
<img src="../images/collections/c.jpeg">
<img src="../images/collections/d.jpeg">
<img src="../images/collections/e.jpeg">
</div>
-- JavaScript --
let colImgRed=document.querySelectorAll(".collections-cont a");
let vertImg=document.querySelectorAll(".vertical-suba img");
let newProImg=["images/collections/f.jpeg","images/collections/g.jpeg","images/collections/h.jpeg","images/collections/i.jpeg","images/collections/j.jpeg",]
let i;
colImgRed[0].onclick=function(){
for(i=0;i<vertImg.length;i ){
vertImg[i].src=newProImg[i];
}
location.href="html/product.html";
}
uj5u.com熱心網友回復:
顯然這種動態替換不能跨靜態頁面作業。您可以設定某種標志,檢查該標志,如果已設定,則在頁面加載時進行實際替換。在第一頁:
colImgRed[0].onclick = function() {
localStorage.setItem('replace', true)
location.href = 'html/product.html'
}
第二個:
(function() {
if (localStorage.getItem('replace')) {
//assuming you have declared the vars as in the question
for(i=0; i<vertImg.length; i ) {
vertImg[i].src = newProImg[i]
}
localStorage.removeItem('replace')
}
})
完全未經測驗
uj5u.com熱心網友回復:
好吧,我要做的是讓每個錨點都有一個特定的片段 (#),就像這樣
<div class="container collections-cont">
<a href="#b"><img src="images/collections/b.jpeg" /></a>
<a href="#c"><img src="images/collections/c.jpeg" /></a>
<a href="#d"><img src="images/collections/d.jpeg" /></a>
<a href="#e"><img src="images/collections/e.jpeg" /></a>
</div>
然后在第 2 頁的 javascript 中,檢查片段并相應地更新影像
let vertImg = document.querySelectorAll(".vertical-suba img");
let newProImg=["images/collections/f.jpeg","images/collections/g.jpeg","images/collections/h.jpeg","images/collections/i.jpeg","images/collections/j.jpeg",]
switch (location.hash) {
case "#a":
for(let i=0;i<vertImg.length;i ){
vertImg[i].src=newProImg[i];
}
break;
}
我在這里做的是在switch陳述句中
匹配片段檢查片段是否匹配“#a”,如果匹配,它將影像更改為新影像case "#a":
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/368420.html
標籤:javascript 数组
上一篇:組合問題-給定兩個整數n和k,撰寫程式回傳123n中k個數字的所有可能組合
下一篇:檢查組件中定義的資料
