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