используя onClick для изображений для отображения текста

Question

Я должен начать, сказав, что если есть такой вопрос, мне очень жаль, но я не мог найти определенного ответа.

Я совершенно новичок в JavaScript, но мне было интересно, как в функции, используя операторы if, вы могли бы узнать, было ли нажато определенное изображение (Идентификатор изображения равно 1,2 и 3), а затем отобразить соответствующий текст под ним который добавляется к предыдущему абзацу.

В этом тексте (text1 и т. Д.) Есть только текст в цитатах, поэтому они прекрасны, поэтому мне было интересно, что я могу сделать, чтобы изменить этот код, чтобы он не печатал текст1 независимо от того, изображение я нажимаю.

(Хотя я думаю, что это из-за него читается, что если идентификатор там он просто печатает его, так вот почему text1 всегда печатается)

код пропущено.

Answer 1

Лучшая структура Решение:

HTML

<a href="javascript: changeText(1);"> 
    <img src="abc.jpg" alt="abc" /> 
</a> 
<a href="javascript: changeText(2);"> 
    <img src="abc.jpg" alt="abc" /> 
</a> 
<a href="javascript: changeText(3);"> 
    <img src="abc.jpg" alt="abc" /> 
</a> 
<div id="div"></div> 

Javascript

function changeText(value) { 
    var div = document.getElementById("div"); 
    var text = ""; 

    if (value == 1) text += "this is one"; 
    if (value == 2) text += "this is two"; 
    if (value == 3) text += "this is tree"; 

    div.innerHTML = text; 
} 

Answer 2

Поскольку вы новичок в javascript, я даю вам руководство для запуска. Вы, вероятно, можете использовать этот способ

//first you can a call function on your every image like 
<img onclick="changeText(1)" src="abc.jpg"> 
<img onclick="changeText(2)" src="def.jpg"> 
<img onclick="changeText(3)" src="efg.jpg"> 



<script type="text/javascript"> 
    function changeText(val) 
    { 
     var para = document.getElementbyID('para').innerHTML; 
     if(val==1) 
     { 
      para += "Image One was Clicked"; 
     } 
     else if(val==2) 
     { 
      para += "Image Two was Clicked"; 
     } 
    } 
</script> 

Answer 3

document.getElementById() вернет вам элемент HTML в виде переменной. Когда вы пишете заявление «if()», некоторые из немногих вещей, которые будут оцениваться до false, и пропустите «if»: null, undefined, 0 и false. Передача объекта, как элемента, будет оцениваться true и зайти в «if».

Скорее всего, этот скрипт находится внутри прослушивателя событий, правильно? Вам должен быть передан объект MouseClickEvent, который будет иметь свойство currentTarget. Вы можете либо проверить идентификатор currentTarget, либо выполнить сравнение, либо сравнить сам .currentTarget с изображениями, полученными с помощью getElementById. Надеюсь, что все имеет смысл!

Answer 4

Я хотел бы направить вас к более простому типу JS, JQuery

Теперь, как использовать код, вам нужно иметь столько изображений и элемент div, чтобы показывать контент. Вот, попробуйте это:

<img src="link/to/file.png" alt="photo" id="1" /> 
<img src="link/to/file.png" alt="photo" id="1" /> 
<img src="link/to/file.png" alt="photo" id="1" /> 
<div id="div"></div> 

Теперь вы можете добавить JQuery как:

$('img').click(function() { // on a click 
    if($(this).attr('id') == '1') { // get the id attribute 
    $('#div').html('Image with 1 was clicked'); // write the text 
    } else { // else if 
    // write something else for the 2 
    } 
} 

Простой, не так ли? Просто обновите содержимое события click.

Но если вы все еще хотите использовать JS, то вот код; просто добавьте обработчик событий onclick для этих изображений.

<img src="link/to/file.png" alt="photo" id="1" onclick="showone()" /> 
<img src="link/to/file.png" alt="photo" id="1" onclick="showtwo()" /> 
<img src="link/to/file.png" alt="photo" id="1" onclick="showthree()" /> 
<div id="div"></div> 

Теперь создадим функцию, как:

function showone() { // click on the first image 
    var div = document.getElementById("div"); // get the div 
    div.innerHTML = "Image with id 1 was clicked"; // change the text (inner html) 
} 
function showtwo() { 
    /* 
    * continue the work of the functions.. 
    */ 
} 

Но вы должны убедиться, что ID присутствует. Например, для кода

И так далее ..

Answer 5

Вы просто проверить, что document.getElementById("1") существует (и, если я правильно понимаю твой такой элемент на странице), так что почему вы продолжаете проходя через этот блок код. Другие случаи не проверяются

Answer 6

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

Например, следующий код будет работать:

<img src="animage.png" id="img1"/> 

Но это не будет:

<img src="animage.png" id="1"/> 

Answer 7

Я думаю, что лучше всего:

<div id="images"> 
    <img src="link/to/file.png" alt="photo" data-text="this is one" /> 
    <img src="link/to/file.png" alt="photo" data-text="this is two" /> 
    <img src="link/to/file.png" alt="photo" data-text="this is three" /> 
</div> 
<div id="text"></div> 

в JQuery:

$('DIV#images img').click(function() { 
    $('DIV #text').html($(this).data('text'))); 
});