JQuery Toggle Изображение не работает

Question

Я просто пытаюсь переключить источник изображения с помощью JQuery. Мой сценарий ниже, я не уверен, почему он не переключается. Когда страница сначала загружается, если вы нажимаете серое изображение, оно переключается на цветное изображение. Но если вы нажмете серое изображение, ничего не произойдет. Поэтому он изменяется при первом щелчке, но ничего не происходит, если вы нажмете после первого щелчка.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#imageid').click(function() { 
      if ($(this).attr('src', 'imagegray.png')) { 
       $(this).attr('src', 'imagecolor.png'); 
      } 
      else if ($(this).attr('src', 'imagecolor.png')) { 
       $(this).attr('src', 'imagegray.png'); 
      } 
     }) 
    }); 
</script> 

Answer 1

Вам необходимо сравнить атрибут src. В настоящее время вы устанавливаете их в ИФ блока условий

$('#imageid').click(function() { 
    if ($(this).attr('src') === 'imagegray.png') { 
     $(this).attr('src', 'imagecolor.png'); 
    } 
    else if ($(this).attr('src') === 'imagecolor.png') { 
     $(this).attr('src', 'imagegray.png'); 
    } 
}) 

Answer 2

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

$('#imageid').click(function() { 
    if ($(this).attr('src') == 'imagegray.png') { 
     $(this).attr('src', 'imagecolor.png'); 
    } 
    else if ($(this).attr('src') == 'imagecolor.png') { 
     $(this).attr('src', 'imagegray.png'); 
    } 
}) 

Fiddle Demo

Answer 3

Другие предложения будут добиться того, что вы хотите, но я считаю, что это будет лучше, если вы работаете с классами

Например, изображение всегда будет иметь active класс и при нажатии кнопки будет вставить/удалить inactive класс:

$(this).toogleClass('inactive'); 

Answer 4

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

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

---

http://jsfiddle.net/yPAqY/

HTML:

<img id="imageid" src="imagegray.png" alt=""> 

JQuery:

$(document).ready(function() { 

    $('#imageid').on("click", function() { 

     var obj = $(this), 
      objAttr = obj.attr('src'), 
      first_img = 'imagegray.png', 
      second_img = 'imagecolor.png'; 

     if (objAttr === first_img) { 
      obj.attr('src', second_img); 
     } else if (objAttr === second_img) { 
      obj.attr('src', first_img); 
     } 

    }); 

}); 

---

http://jsfiddle.net/yPAqY/1

HTML:

<img id="imageid" src="imagegray.png" alt=""> 

JQuery:

$(document).ready(function() { 

    $('#imageid').on("click", function() { 

     var obj = $(this), 

      first_img = 'imagegray.png', 
      second_img = 'imagecolor.png', 

      imgs = obj.attr('src') == first_img ? second_img : first_img; 

     obj.attr('src', imgs); 

    }); 

}); 

---

http://jsfiddle.net/yPAqY/2/

HTML:

<img id="imageid" src="imagegray.png" data-img2="imagecolor.png" alt=""> 

JQuery:

$(document).ready(function() { 

    var image = $('#imageid'), 
     imageSrc = image.attr('src'), 
     imageData = image.data('img2'); 

    image 
     .removeAttr('data-img2') 
     .on("click", function() { 

      var obj = $(this), 
       imgs = obj.attr('src') == imageSrc ? imageData : imageSrc; 

      obj.attr('src', imgs); 

     }); 

}); 

Answer 5

место два изображения в отдельном классе

и переключения класса вы можете увидеть эффект