根据点击的链接更改图像

I am trying to change the image based when someone clicks on a link. I have coded this so far:

我试图根据有人点击链接更改图像。到目前为止我编码了这个:

<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>

And 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>

The image does not change. I am using the alert for testing. I am a bit new to javascript so how do I go about solving this?

图像不会改变。我正在使用警报进行测试。我对javascript有点新,所以我该如何解决这个问题呢?

2 个解决方案

#1

Pass the reference of the current clicked link into onclick handler:
html part:

将当前点击链接的引用传递给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>

Optimize your js part as shown below:

优化你的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

First, you do know that in your example, the last two hyperlinks have the same name and href values, right?

首先,您知道在您的示例中,最后两个超链接具有相同的名称和href值,对吧?

Next, onclick as an inline event handler was never standard and is considered bad form. Instead use the DOM standard, addEventListener() as follows:

接下来,onclick作为内联事件处理程序从来都不是标准的,被认为是错误的形式。而是使用DOM标准addEventListener(),如下所示:

<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>

In the following JSFiddle, clicking a, b or d will result in the first image going away and a replacement coming up, but when you click c, a different image comes up. Be patient, by the way, these are hi-res images and take a few seconds to load.

在下面的JSFiddle中,单击a,b或d将导致第一个图像消失并出现替换,但是当您单击c时,会出现另一个图像。顺便说一下,请耐心等待这些高分辨率图片并花几秒钟加载。

Check out a working sample: https://jsfiddle.net/adspxoc5/5/

查看一个工作样本:https://jsfiddle.net/adspxoc5/5/

#1