jQuery改變圖像onclick點擊和其他人

我有一個關於jQuery的問題。我有三個本質上相同的圖像。不同的是，其中一個圖像（我們稱之爲「活動」圖像）是不同的顏色，而其他兩個圖像是相同的。jQuery改變圖像onclick點擊和其他人

這是一個視覺作品：我有一個「促銷」橫幅，其旁邊有三個箭頭圖像。根據您點擊的箭頭圖像，會顯示不同的促銷圖片（共有三張促銷圖片 - 與箭頭相同）。

我很喜歡它，如果我可以讓「活動」箭頭以一種顏色顯示，而「非活動」箭頭是另一種顏色。當我點擊另一個箭頭時，原來的「活動」一個因爲「不活躍」而我剛剛點擊的那個變爲「活動」。我敢肯定，這是可以做到的，我只是不知道如何做到這一點：/

下面是我的工作的HTML：

<div class="rotation_container"> 
    <a class="rotator" id="rotator_1" href="#"><img class="cycle_icon" id="r1" src="images/promo/rotator_active.png" /></a> 
    <a class="rotator" id="rotator_2" href="#"><img class="cycle_icon" id="r2" src="images/promo/rotator_inactive.png" /></a> 
    <a class="rotator" id="rotator_3" href="#"><img class="cycle_icon" id="r3" src="images/promo/rotator_inactive.png" /></a> 
</div>

來源

2011-02-12 david cayne

你可以使用類來做到這一點。點擊箭頭時，您將其全部設置爲一個非活動類，除了被點擊的類以外，您將其設置爲活動類。 – JCOC611 2011-02-12 17:11:20

像這樣的事情可能與您當前的標記工作：

$('a.rotator').click(function() { 
    // Make all inactive 
    $('div.rotation_container img').attr('src', 'images/promo/rotator_inactive.png'); 

    // Make the one that was clicked active 
    $(this).find('img').attr('src', 'images/promo/rotator_active.png'); 
});

但真的，你應該通過CSS實現這一點。取出<img>元素和應用.active類活動錨：

<div class="rotation_container"> 
    <a class="rotator active" id="rotator_1" href="#"></a> 
    <a class="rotator" id="rotator_2" href="#"></a> 
    <a class="rotator" id="rotator_3" href="#"></a> 
</div>

您可以通過CSS應用有效/無效的圖像：

a.rotator { background:url(images/promo/rotator_inactive.png) } 
a.rotator.active { background:url(images/promo/rotator_active.png) }

而且.click處理變得簡單多了：

$('a.rotator').click(function() { 
    $('a.rotator.active').removeClass('active'); 
    $(this).addClass('active'); 
});

來源

2011-02-12 17:15:51 meagar

我真的不敢相信我沒有想到CSS方法。我一定會記住！ – 2011-02-12 21:11:56

嘗試類似下面的腳本：

$(document).ready(function(){ 
    $('.rotator').click(function(){ 
     $(this).find('img').attr('src', $(this).find('img').attr('src').replace('_inactive', '_active')); 

     $('.rotator:not(#'+$(this).attr('id')+') img').each(function(){ 
      $(this).attr('src', $(this).attr('src').replace('_active', '_inactive')); 
     }); 

     return false; 
    }); 
})(jQuery);

1）如果「.rotator」被點擊時，則：

2）中找到「IMG」的內部和替換「_inactive」與在src 「_active」。

3）每隔「IMG」內部「.rotator」變成「_inactive」而不是「_active」

4）「返回false;」使點擊不滾動頁面頂部

來源

2011-02-12 17:41:03 ahmet2106

這工作奇蹟，謝謝！ – 2011-02-12 21:13:04

jQuery改變圖像onclick點擊和其他人

回答

相關問題