클릭하면 이미지가 다른 이미지로 변경됩니다.

Question

클릭하면 이미지가 변경되고 다른 이미지를 클릭하면 원본 이미지로 다시 바뀝니다. 지금까지 제가 처음 클릭 할 때 이미지를 변경했지만 다음 부분을 알지 못합니다. 다른 이미지를 클릭하면 원본 이미지로 돌아갑니다. 이것이 내가 가진 것입니다 :

$(function() { 
    $('#two').click(function(){ 
     $("#imgtwo").attr('src',"resources/items/icon2blue.png"); 
    }); 
}); 

어떤 도움을 주실 수 있습니까? 감사!

Answer 1

이미지를 클릭하면 이미지를 변경하고 다른 모든 이미지를 기본 이미지로 다시 설정합니다. 이렇게하면 주어진 이미지가 클릭 할 때마다 이미지가 변경되고 다른 모든 이미지는 기본값으로 다시 설정됩니다.

$('#one').click(function(){ 
    $("#imgone").attr('src',"resources/items/click-image.png"); 
    $("#imgtwo").attr('src',"resources/items/standard-image.png"); 
    $("#imgthree").attr('src',"resources/items/standard-image.png"); 
}); 
$('#two').click(function(){ 
    $("#imgone").attr('src',"resources/items/standard-image.png"); 
    $("#imgtwo").attr('src',"resources/items/click-image.png"); 
    $("#imgthree").attr('src',"resources/items/standard-image.png"); 
}); 
$('#three').click(function(){ 
    $("#imgone").attr('src',"resources/items/standard-image.png"); 
    $("#imgtwo").attr('src',"resources/items/standard-image.png"); 
    $("#imgthree").attr('src',"resources/items/click-image.png"); 
}); 

내 JS는 녹슬었지만 아이디어를 얻었습니다.

Answer 2

var imgArray = [ 
'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Brain_human_sagittal_section.svg/295px-Brain_human_sagittal_section.svg.png', 
'http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Solanum_muricatum_Flower_and_Fruit.jpg/220px-Solanum_muricatum_Flower_and_Fruit.jpg' 
]; 

var counter = 0; 
document.getElementById('my_button').onclick = function() { 
    document.getElementById('mainImage').src = imgArray[counter % imgArray.length]; 
    counter += 1; 
} 

희망이

가 this.set 다른 ATTRIB 시도이 바이올린

http://jsfiddle.net/sornalingam/XyezG/

Answer 3

$(function() { 
    $('#two').click(function(){ 
     $('#imgtwo').data('targetsrc',$(this).attr('src')); 
     $("#imgtwo").attr('src',"resources/items/icon2blue.png"); 
    }); 


    $('#imgtwo').click(function(){ 
     $("#two").attr('src',$(this).data('targetsrc')); 
     $('#two').data('targetsrc',$(this).attr('src')); 
    }); 
}); 

을 시도하고

Answer 4

당신이 사용할 수 있습니다에서 가치를 얻을 도움이 될 것입니다 접근 방식 :

$(function() { 
    var count = 0; 
    $('#two').click(function(){ 
     $("#imgtwo").attr('src',"resources/items/icon2blue.png"); 
    }); 
    $('#image2').click(function(){ // do it with other images 
     if(count < 4) { 
      count++; 
     } else { 
      // reset to original image 
      count = 0; 
      $("#imgtwo").attr('src',"resources/items/original_image.png"); 
     } 
    }); 
}); 

id이 another_image 인 것으로 가정합니다. 내가 그렇게 어떻게,

$(function() { 
    var img_state = true; 
    $('#two').click(function(){ 
     if(img_state) { 
      $("#imgtwo").attr('src',"resources/items/icon2blue.png"); 
     } else { 
      $("#imgtwo").attr('src',"resources/items/another_image.png"); 
     } 
     img_state = !img_state; 
    }); 
});