JavaScript/jQuery изменения img picture

Question

У меня есть группа span элементов, которая содержит img тег внутри.

<span id = "span1" class="span-class"> 
    <img src="img.jpg"/> 
</span> 
<!--Another such span elements --> 
<span id = "span123" class="span-class"> 
    <img src="img.jpg"/> 
</span> 

Это img.jpg является defalt изображение, которое должно быть вынесено в течение любого span, когда страница загрузки первой. Я хочу, чтобы img.jpg был заменен на first_clicked_img.jpg, когда я нажимаю на элемент span для span. Я щелкнул в первый раз. Теперь я хочу, чтобы first_clicked_img.jpg и second_clicked_img.jpg заменили друг друга, когда я нажимаю на диапазон. Как это можно сделать с помощью jQuery или, если будет проще, с чистым js?

Answer 1

$(".span-class").click(function() { 
    var img = $(this).find("img"); 
    var new_src; 
    switch (img.attr("src")) { 
     case "img.jpg": 
     case "second_clicked_img.jpg": 
      new_src = "first_clicked_img.jpg"; 
      break; 
     case "first_clicked_img.jpg": 
      new_src = "second_clicked_img.jpg"; 
      break; 
    } 
    img.attr("src", new_src); 
}); 

Answer 2

Вы должны связать onclick событие в span элемента и на этом событии шкурой#span1 и показать#span123.

То же самое, что и назад. На нажмите на элементе "#span123шкуройspan123 и показать#span1.

приветствий

Answer 3

Из того, что я понял из вашего вопроса, вы хотите изменить IMG к first_clicked_img на первый щелчок и second_clicked_img на втором месте, это должно помочь вам решить эту проблему

var clicks = 0; 
$('span').on('click', function(){ 
    if(clicks == 0){ 
     clicks = 1; 
     $(this).find('img').attr('src','first_clicked_img.jpg'); 
    }else if(clicks==1){ 
     clicks = 0; 
     $(this).find('img').attr('src','second_clicked_img.jpg'); 

    } 
}); 

Я сбросил clicks на 0 во втором if, потому что тогда при последующем нажатии span он изменится на first_clicked_img, что вы хотите, правильно?