我正在嘗試使用 Javascript 在單擊時交換 SVG 徽標影像。我的腳本如下所示：
document.querySelector('.logo').addEventListener('click', function() {
document.querySelector('#logo-switch').src='logo-B.svg';
document.querySelector('#logo-switch').src='logo-A.svg';
})
該功能在第一次點擊時起作用（當第三行代碼被洗掉時）：
document.querySelector('#logo-switch').src='logo-A.svg';
但是，我希望它在src每次單擊徽標時切換回原始狀態 - 這應該起到切換的作用。
這是用 if 陳述句完成的嗎？或者這是如何實作的？
非常感謝
uj5u.com熱心網友回復：
您需要檢查哪個徽標是最新的，然后將其替換為另一個。它也可以通過三元運算子來完成，但if-else 在這種情況下更易于人類閱讀/理解。
正如您在 OP 中描述的那樣，該功能在第一次點擊時運行良好，因此假設點擊處理程式運行良好，以下是要添加的條件
document.querySelector('.logo').addEventListener('click', function() {
if (document.querySelector('#logo-switch').src.indexOf('logo-A') != -1) {
document.querySelector('#logo-switch').src = 'logo-B.svg';
} else {
document.querySelector('#logo-switch').src = 'logo-A.svg';
}
})
uj5u.com熱心網友回復：
使用閉包怎么樣？
document.querySelector('.logo').addEventListener(
'click',
switchImage(
document.querySelector('#logo-switch'),
'logo-B.svg',
'logo-A.svg'
)
);
function switchImage (element, src1, src2) {
var first = true;
return function () {
if (first) {
element.src = src1;
first = false;
} else {
element.src = src2;
first = true;
}
}
}
uj5u.com熱心網友回復：
此代碼有效：-
let replaced = false;
document.querySelector('.logo').addEventListener('click', function() {
document.querySelector('#logo-switch').src = replaced ? 'logo-A.svg' : 'logo-B.svg';
replaced = !replaced;
});
這使用一個變數來跟蹤內容是否被替換替換，如果這有意義的話。然后在此基礎上更改影像的源檔案。
uj5u.com熱心網友回復：
.logo為元素使用額外的 css-class并在單擊時切換它。該片段為此使用事件委托。
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`logo`)) {
return evt.target.classList.toggle(`right`);
}
}.logo {
width: 150px;
height: 150px;
display: inline-block;
background: url(//upload.wikimedia.org/wikipedia/commons/a/af/Skip_to_left3.svg) no-repeat;
background-size: contain;
cursor: pointer;
}
.right {
background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1f/Skip_to_right3.svg);
}<div class="logo"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438219.html
標籤：javascript html css 图片 svg
下一篇：CSS-懸停時導航到下一個欄