jQuery切换img属性

Question

I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.

$(".browseTable").on('click', 'td', function () {                

    var thumbNail = $(this).parent('tr').find('img').attr('src');
    var feature = $('#featureImg img').attr('src');

    $('#featureImg img').fadeOut(400, function () {
        $(this).fadeIn(400)[0].src = thumbNail;
    });
});

Answer 1

You can achieve your target via setting src of image in css.

    .imageOne{
        content:url(YOUR SOURCE);
    }

    .imageTwo{
        content:url(YOUR SOURCE);
}

add class to your image element in start check if element exist by either class if exist toggle() to another, this will change the image back to another. And use toggle() like following example

$(".browseTable").on('click', 'td', function () {                

            //var thumbNail = $(this).parent('tr').find('img').attr('src');
            //var feature = $('#featureImg img').attr('src');

            //$('#featureImg img').fadeOut(400, function () {
            //    $(this).fadeIn(400)[0].src = thumbNail;
            //});               

            $('#featureImg img').find('.imageOne, .imageTwo').toggle();
        });

I am able to use toggle simply to change one element to another. etc. hope it will help you.

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Answer 2

Try this. When the parent is clicked we toggle both children. The large version starts off hidden.

<div class="toggle js-toggle">
    <img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
    <img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>

The jQuery

$('.js-toggle').on('click', function() {

    $(this).find('.js-toggle-image').toggle();

});

https://jsfiddle.net/uoLv2nkh/1/

Or an only CSS way if you only care about when the user is clicking.

https://jsfiddle.net/uoLv2nkh/

Answer 3

You can use data for store source string and toggling images

preview on : https://jsfiddle.net/5kxf65Lx/

<img src="source1.jpg" data-srcfirst="source1.jpg"     data-srcsecond="source2.jpg" />

<script type="text/javascript">

$('img').click(function(){
    var loaded = $(this).attr('src')

    var first = $(this).data('srcfirst')
    var second = $(this).data('srcsecond')

    if(loaded == first){
        $(this).attr('src' , second)
    } else {
        $(this).attr('src' , first)
    }

})