Question

所以我的网站上有一张图片。每当我点击它，我希望它改变为另一个图像。我现在已经开始工作了。但是，当我点击更改后的图像时，我希望它更改回第一张图像。

这是我现在的代码：

$("#images2").attr("src", "http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg")

Answer 1

使用此代码：

jQuery(function($) {
    $('#images2').on('click', function() {
        var src = $(this).attr('src');
        if(src = 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg')
            $(this).attr('src', 'orginalimage.jpg');
        else
            $(this).attr('src', 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg');
    });
});

这会在点击图片时附加一个事件。它会检查src并根据它进行更新。

Answer 2

请检查这个小提琴

https://jsfiddle.net/1bhf1e1o/

$('#rotate_images').on({
    'click': function () {
        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg') src = 'img2_on.png';
        if (origsrc == 'img2_on.png') src = 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg';
        $(this).attr('src', src);
    }
});

Answer 3

src更改方法在单击后具有图像加载时间，这可能导致不需要的行为。这是一个优雅的解决方案。

fiddle

$( document ).ready(function() {
        $("#image_cont img").click(function(){
            $(this).hide();
            $(this).siblings("img").show();
        });
    
    });

 .hidden{
        display:none;
    }
    img{
        width:100px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="image_cont">
        <img src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg"/>
        <img class="hidden" src="http://cdn.searchenginejournal.com/wp-content/uploads/2013/09/google-panda-penguin.jpg"/>
    </div>

每次有人点击图像时更改图像src

3 个答案: