Question

点击缩略图时，我试图将图像从缩略图切换到要素图像。目前，当它点击时图像将会交换，但是我不能让它们换回拇指指甲再次点击。我尝试使用切换但是当点击拇指指甲时它会完全删除图像而我无法返回任何图像。目前，这将切换图像，但不会切换或在点击时切换回来。

$(".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

您可以通过在css中设置图像的src来实现目标。

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

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

在start中为您的image元素添加class 如果存在toggle（）到另一个类，则检查任一类是否存在元素，这会将图像更改回另一个。并使用toggle（），如下面的示例

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

我可以简单地使用切换来将一个元素更改为另一个元素。希望它会对你有所帮助。

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

Answer 2

试试这个。单击父级时，我们切换两个子级。大版本开始隐藏。

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

jQuery

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

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

});

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

如果您只关心用户点击的时间，那么这只是一种CSS方式。

https://jsfiddle.net/uoLv2nkh/

Answer 3

您可以将数据用于商店源字符串和切换图像

预览：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)
    }

})

Jquery切换img属性

3 个答案: