根據單擊的鏈接更改圖像
[英]Changing an image based on the clicked link
問題描述
我正在嘗試根據某人單擊鏈接時的圖像進行更改。 到目前為止，我已經對此進行了編碼：
<script>
function changeImage(e) {
var elem, evt = e ? e:event;
alert("Event is"+evt.target);//for testing
var image = document.getElementById('myImage');
var feat1 = document.getElementById('feat1');
var feat2 = document.getElementById('feat2');
var feat3 = document.getElementById('feat3');
var feat4 = document.getElementById('feat4');
if (evt.target.match(feat1.href)) {
image.src = "";
} else {
image.src = "";
}
}
</script>
和HTML：
<li><a name="a" href="#1" onclick="changeImage()" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage()" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage()" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage()" id="feat4">d</a></li>
圖像不會改變。 我正在使用警報進行測試。 我對javascript有點陌生，所以我該如何解決呢？
2 個解決方案
解決方案1
0 2016-01-30 21:07:58
將當前單擊鏈接的引用傳遞到onclick處理程序中：
html部分：
<li><a name="a" href="#1" onclick="changeImage(this)" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage(this)" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage(this)" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage(this)" id="feat4">d</a></li>
優化您的js部分，如下所示：
<script>
function changeImage(e) {
var elem = e.currentTarget,
id = elem.id,
href = elem.href;
if (<your_condition>) { // exemplary code
image.src = "";
} else {
image.src = "";
}
}
</script>
解決方案2
0 2016-01-30 21:57:08
首先，您確實知道在示例中，最后兩個超鏈接具有相同的名稱和href值，對嗎？
接下來，onclick作為內聯事件處理程序從來都不是標准的，並且被認為是錯誤的形式。 而是使用DOM標准，如下所示添加事件（）：
<body>
<li><a name="a" href="#1" id="feat1">a</a></li>
<li><a name="story" href="#2" id="feat2">b</a></li>
<li><a name="rep" href="#3" id="feat3">c</a></li>
<li><a name="reg" href="#4" id="feat4">d</a></li>
<img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/2000px-NASA_logo.svg.png" height="200">
<script>
(function(){
var theAnchors = document.querySelectorAll("a[id^='feat']");
for(var i = 0; i < theAnchors.length; ++i) {
theAnchors[i].addEventListener("click", function(){
changeImage(this);
});
}
function changeImage(targetAnchor) {
var image = document.getElementById('myImage');
var href = targetAnchor.href;
if (href.indexOf("#3") > -1) {
image.src = "http://www.nasa.gov/centers/jpl/images/content/650602main_pia15415-43.jpg";
} else {
alert("else");
image.src = "http://www.nasa.gov/centers/goddard/images/content/280046main_CassAcomposite_HI.jpg";
}
}
()); // IIFE
</script>
</body>
在下面的JSFiddle中，單擊a，b或d將導致第一個圖像消失並出現替換圖像，但是當您單擊c時，將出現另一個圖像。 順便說一下，請耐心等待，這些都是高分辨率圖像，需要花費幾秒鍾來加載。
查看工作示例： https : //jsfiddle.net/adspxoc5/5/
根據用戶單擊的鏈接更改提示文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.