Изменить изображение на Клик в DIV?

Question

У меня есть настройка jsFiddle, в которой вы сможете щелкнуть изображение слева и когда вы это сделаете, оно изменит изображение, но когда вы нажимаете на DIV целиком (растянуть-один), оно не меняет местамиизображение отсутствует.

Я хочу иметь возможность щелкнуть по DIV (в целом) и поменять изображение, находящееся в DIV, без возможности щелкнуть только по изображению.

Вы можете посмотреть, что я имею в виду здесь: http://jsfiddle.net/5PDV5/1/

Спасибо всем!:)

Answer 1

Все, что вам нужно сделать, это внутри обработчика щелчка, чтобы div изменил src изображения.

jQuery('.expand-one').click(function(){
        jQuery('.content-one').slideToggle('fast');
        var img = $(this).find('img'),
            src = img.attr("src")
            alt = img.data("altsrc");
            img.attr("src",alt).data("altsrc",src);
    });
    jQuery('.expand-one').toggle(function() {
        jQuery('.content-one').slideDown('fast');
        }, function() {
        jQuery('.content-one').slideUp('fast');
    });

Также более эффективным методом было бы использование классов и фоновых изображений, чтобы код выглядел следующим образом:

HTML

<div class="expand-one blue-icon"></div>

CSS

.expand-one { margin-left: 5px } /* Margin of Icon Size */
.blue-icon { background-image: url('blue-icon.png'); }
.green-icon { background-image: url('green-icon.png'); }

JS

//This turns one off and the other on
$(this).toggleClass('blue-icon green-icon');