1

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

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

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

4

4 回答 4

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

试试这个。设置另一个属性并从中获取价值

于 2013-08-06T09:21:24.317 回答
0

您可以使用这种方法：

$(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;
    });
});
于 2013-08-06T09:35:25.190 回答
0

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

$('#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 生锈了，但你明白了。

于 2013-08-06T09:15:10.527 回答
0 
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/

于 2013-08-06T09:20:20.020 回答