0
我有一个jsFiddle设置,你可以在左边点击图像,当你点击图像时会改变图像,但是当你点击DIV作为整体时(扩展一),它不会交换形象出来。在DIV内点击更改图片?
我希望能够点击一个DIV(作为一个整体)并换出一个DIV内的图像,而不仅仅能够点击图像。
您可以查看我的意思是在这里: http://jsfiddle.net/5PDV5/1/
谢谢大家! :)
我有一个jsFiddle设置,你可以在左边点击图像,当你点击图像时会改变图像,但是当你点击DIV作为整体时(扩展一),它不会交换形象出来。在DIV内点击更改图片?
我希望能够点击一个DIV(作为一个整体)并换出一个DIV内的图像,而不仅仅能够点击图像。
您可以查看我的意思是在这里: http://jsfiddle.net/5PDV5/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');
天啊!你是救世主!谢谢你,先生,我感谢你的帮助。你救了我很多愤怒。我会在两分钟内将它标记为答案。 – 2012-01-10 23:12:07
我更喜欢那种方法。谢谢! – 2012-01-10 23:19:26