點擊更改多個圖像

Question

我有6個圖像。 當它們在圖像上滾動時，使用css hover進行更改。 單擊圖像時會顯示原始圖像（再次使用css），但是我希望其中一個圖像在選擇一個時變暗。 我一直在尋找到各種JS選項，但只是似乎無法得到它的工作。有沒有人有什麼建議？

Answer 1

另一種解決方案是向所選圖像和圖像父項添加一個類。 這使得它更容易維護，因爲樣式都是在CSS中完成的。

簡單的例子在這裏：

CSS

.img{ 
    display:inline-block; 
    height:40px; 
    width:40px; 
    border:1px solid black; 
} 

.clicked .img{ 
    opacity:0.3; 
} 

.clicked .img.selected{ 
    opacity:1; 
    background:red; 
} 

JS

​ 
$('.img').on('click', function() { 
    $('.img').removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.container').addClass('clicked'); 
})​ 

HTML

<div class="container"> 
    <div class="img">img</div> 
    <div class="img">img</div> 
    <div class="img">img</div> 
    <div class="img">img</div> 
    <div class="img">img</div> 
    <div class="img">img</div> 
</div>​ 

http://jsfiddle.net/renekoch/y6YCc/