重新定義不再選擇的圖像邊框

Question

我最近才投入JavaScript和jQuery，所以請和我一起裸照！

我正在創建一個表單，其中一些元素是圖像。懸停時，有一條CSS規則可在選定圖像周圍創建一個粗邊框。選擇圖像時也是如此。它留下了厚厚的邊界。

雖然我面對的問題是，當單擊圖像時，雖然它在正確的圖像周圍留下厚厚的邊框，但並未重新定義其他先前選定圖像的邊框。 （通過重新定義我的意思是讓它半透明以阻止圖像移動）。

下面是一個JSFiddle：http://jsfiddle.net/bewWF/或者您可能會看到下面的代碼。

HTML

<div class="grid_12 alpha" id="selection"> 

    <input type="hidden" id="SelSunlight" name="SelSunlight" value=""/> 

    <div class="grid_2 omega" style="margin-left: 8px"> 
     <div align="center"><img src="images/details/any.png"/ id="AnySun" name="AnySun" onClick="SelectSunlight('AnySun')"/></div> 
     <p id="image-text">Any</p> 
    </div> 

    <div class="grid_2 alpha omega"> 
     <div align="center"><img src="images/details/sunlight/full_light.png" id="FullSun" name="FullSun" onClick="SelectSunlight('FullSun')"/></div> 
     <p id="image-text">Full Sun</p> 
    </div> 

    <div class="grid_2 alpha omega"> 
     <div align="center"><img src="images/details/sunlight/part_shade.png" id="PartShade" name="PartShade" onClick="SelectSunlight('PartShade')"/></div> 
     <p id="image-text">Part Shade</p> 
    </div> 

    <div class="grid_2 alpha"> 
     <div align="center"><img src="images/details/sunlight/full_shade.png" id="FullShade" name="FullShade" onClick="SelectSunlight('FullShade')"/></div> 
     <p id="image-text">Full Shade</p> 
    </div> 

</div> 

的JavaScript

function SelectSunlight(item) { 
    $.each(['#AnySun','#FullSun','#PartShade','#FullShade'], function() { 
     $(this).css('border', "3px solid #f5f5f5"); 

     $(this).hover(function() { 
      $(this).addClass('hover'); 
     }, function() { 
      $(this).removeClass('hover'); 
     }); 
    }); 

    $('#'+item).css('border', "3px solid #a6be39"); 
    $('#SelSunlight').val(item); 
} 

.hover被定義爲#selection .hover {border: 3px solid #a6be39}

我的問題後花一個漫長的時間量我以後解決問題終於用盡了想法對這個問題。我的頭建議它應該工作，但顯然它不！

非常感謝！

-

編輯 - 爲了確認需要做什麼：

1）用戶選擇一旦圖像被選擇的圖像 2），該圖像的邊界保持厚 3 ）所有其它圖像必須保持懸停效果，由此，邊界變得厚和薄分別 4）如果另一圖像然後選擇，在步驟2中的邊界被重置，並且新的圖像呈現出粗邊框

氏可能會使圖像變得更清晰：http://i48.tinypic.com/ei4f9t.png

Answer 1

您可以在選擇當前的邊框之前清除所有邊框。那是你在找什麼？

function SelectSunlight(item) { 
    $("img").css('border','3px solid #f5f5f5'); //resets border of all images 
    $.each(['#AnySun', '#FullSun', '#PartShade', '#FullShade'], function() { 
     $(this).css('border', "3px solid #f5f5f5"); 

     $(this).hover(function() { 
      $(this).addClass('hover'); 
     }, function() { 
      $(this).removeClass('hover'); 
     }); 
    }); 

    $('#' + item).css('border', "3px solid #a6be39"); 
    $('#SelSunlight').val(item); 
} 

演示： http://jsfiddle.net/bewWF/1/

Answer 2

看起來你可以簡化很多：

$(function() { 
    $('#AnySun, #FullSun, #PartShade, #FullShade').on('click', function() { 
     $(this).addClass('hover').siblings('img').removeClass('hover'); 
     $('#SelSunlight').val(this.id); 
    }); 
}); 

FIDDLE

Answer 3

優化我所有的代碼。由於您使用CSS :hover，因此您無需將jQuery用於懸停邊框。我爲每張圖片添加了class="sun"，以便您不需要使用$(".sun")而不是較慢的.each。我使用jQuery的.click來替換onclick和.prop以獲得名稱屬性點擊.sun。我將演示的選定img邊框改爲紅色。

HTML：

<div id="selection"> 
    <input type="hidden" id="SelSunlight" name="SelSunlight" value="" /> 
    <img class="sun" src="http://jonline.me.uk/fbedder/images/details/any.png" id="AnySun" name="AnySun" /> 
     <p id="image-text">Any</p> 
    <img class="sun" src="http://jonline.me.uk/fbedder/images/details/sunlight/full_light.png" id="FullSun" name="FullSun" /> 
     <p id="image-text">Full Sun</p> 
    <img class="sun" src="http://jonline.me.uk/fbedder/images/details/sunlight/part_shade.png" id="PartShade" name="PartShade" /> 
     <p id="image-text">Part Shade</p> 
    <img class="sun" src="http://jonline.me.uk/fbedder/images/details/sunlight/full_shade.png" id="FullShade" name="FullShade" /> 
     <p id="image-text">Full Shade</p> 
</div> 

CSS：

.sun {border: 3px solid #f5f5f5} 
.sun:hover {border: 3px solid #a6be39} 
.selected {border: 3px solid red !important} 

的jQuery：

$(document).ready(function(){ 
    $(".sun").click(function(){ 
     $(".sun").removeClass("selected"); 
     $(this).addClass("selected"); 
     var item = $(this).prop("name"); 
     $('#SelSunlight').val(item); 
    }); 
}); 

的jsfiddle：http://jsfiddle.net/bewWF/2/