Изменение изображения по нажатой ссылке

Я пытаюсь изменить изображение, когда кто-то нажимает на ссылку. Я закодирован это до сих пор:Изменение изображения по нажатой ссылке

<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, так как я могу это решить?

источник

2016-01-30 user2726634

Передайте ссылку текущего щелкнули ссылку в 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>

источник

2016-01-30 21:07:58 RomanPerekhrest

Во-первых, вы знаете, что в ваш пример, последние две гиперссылки имеют одно и то же имя и значения 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, нажатие кнопка, б или d приведет к первому изображению уезжает и замену наступающей, но при нажатии кнопки с, появляется другое изображение. Будьте терпеливы, кстати, это изображения с высоким разрешением и загрузка занимает несколько секунд.

Заканчивать рабочий образец: https://jsfiddle.net/adspxoc5/5/

источник

2016-01-30 21:57:08

Спасибо, сэр. Фактически я немного отредактировал его, прежде чем вставлять его здесь, и я забыл удалить значение href во время копирования. – user2726634

Изменение изображения по нажатой ссылке

ответ

Смежные вопросы