Question

我需要一些帮助来改变点击图像，然后在点击另一个图像时将其更改回原始图像。到目前为止我所有的一切都是在第一次点击时更改图像，但我不知道下一部分，它会在单击另一个图像时返回到原始图像。这就是我所拥有的：

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

任何帮助将不胜感激！谢谢！

Answer 1

$(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'));
    });
});

尝试这个。设置另一个attrib并从中获取价值

Answer 2

单击任何图像时，请更改图像并将所有其他图像重置为默认图像。这样，每当任何给定图像被点击时，它都会改变，并且您知道所有其他图像将被设置回默认值。

$('#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 3

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;
}

希望这会有所帮助

试试这个小提琴

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

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;
    });
});

单击更改图像，然后单击另一个图像上的原始图像

4 个答案: