IMG SRC ID, установленный по ссылке

Question

Я пытаюсь создать простую ссылку, которая позволит мне изменить изображение на моей странице. Я дал изображению идентификатор:

IMG SRC = "myImage.png" ID = "дисплей"/

Как бы вы изменить это изображение, используя?

Answer 1

Простейшим способом было бы использовать jQuery и добавить прослушиватель событий в <a/>. Это бы что-то вроде этого:

/* 
* Note that I add an ID to the <a/> tag selector 
* as we don't want to listen to ALL <a/> tags 
* and only a specific one. Make sure to add an ID to you <a/> 
*/ 
$('a#click-to-change-img').on('click',function(evt){ 
    $('#display').attr('src','/assets/img/new-image-file.png'); 
}); 

Вы можете также сделать инлайн JavaScript (который я лично не нравится)

<a href="#" onclick="document.getElementById('display').src='/assets/img/new-image-file.png';return false;"> 
    Click Me 
</a> 

В обоих случаях мы ждать тег будет нажата. Когда это произойдет, мы затем запустим функцию, которая найдет тег с «id» «display» и изменит значение его атрибута «src»