3 回答

TA貢獻1772條經(jīng)驗 獲得超6個贊
當您使用 時image.src,它會返回圖像的完整路徑。在這種if情況下,您只檢查圖像的相對路徑。要檢查圖像的相對路徑,可以使用image.getAttribute('src').
function toggle(image) {
if (image.getAttribute('src') == "data/pause.png") {
image.setAttribute('src', 'data/play.png');
} else {
image.setAttribute('src', 'data/pause.png');
}
}
<body>
<div class="newsDiv">
<div class="left">Latest</div>
<div id="news" class="marquee"></div>
<img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">
</div>
<div id="detail" class="detail">
</div>
</body>

TA貢獻1765條經(jīng)驗 獲得超5個贊
我沒有發(fā)現(xiàn)您的切換邏輯有任何問題。您唯一需要考慮的是使用而不是.?這是因為img.src
img.getAttribute('src')
- 為您提供 HTML 標記設置的實際值img.src
- 源的有效絕對路徑
function toggle(img) {
? // var playSrc = "data/play.png"; // to use your file instead
? var playSrc = "https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-1516951-1285078.png";
// var pauseSrc = "data/pause.png"; // to use your file instead
? var pauseSrc = "http://www.pngall.com/wp-content/uploads/5/Pause-Button-Transparent.png";
? if (img.getAttribute('src') != pauseSrc)
? {
? ? img.setAttribute('src', pauseSrc);
? }
? else // The part if (image.src == "data/pause.png") is redundant
? {
? ? img.setAttribute('src', playSrc);
? }
}
這樣一來,標簽中有很多垃圾<head>,您需要將其刪除(我已將它們放在下面)??赡苁且驗檫@個原因,代碼無法工作。
<script id="news-detail-template" type="text/html">
? ? ? ? ? ? ? ? ? ? <img class='news_photo' src='{{photo}}' >
? ? ? ? <div class='news_heading'>{{heading}}</div>
? ? ? ? <div class='date'>{{Date}}</div>
? ? ? ? <div class='news_detail'>{{details}}</div>? ? ? ? ??
? ? ? ? </script>??
? ? ? ? <script id="news-item-template" type="text/html">
? ? ? ? <div news_id='{{id}}' class='news_item' > {{heading}} </div>?
? ? ? ? <img class='news_img' src='data/NBA.jpg'>
? ? ? ? </script>? ?

TA貢獻1860條經(jīng)驗 獲得超9個贊
您需要使用該getAttribute
函數(shù)來檢查相等性。您可以使用常規(guī)賦值運算符設置圖像源,但不能用于==
檢查相等性。
添加回答
舉報