Question

我正在尝试根据用户点击链接更改图片。我到目前为止编码了这个：

<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有点新，所以我该如何解决这个问题？

Answer 1

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

Answer 2

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

接下来，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>

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

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

根据点击的链接更改图像

2 个答案: