重新定义不再选定的图像边界

Question

我正在创建一个表单，其中一些元素是图像。当徘徊在上面时，有一个CSS规则，它在选定的图像周围创建一个粗边框。对于选择图像时，这也是正确的；它会留下厚厚的边框。

但是，我面临的问题是，当一个图像被单击时，当它在正确的图像周围留下一个厚厚的边框时，它不会重新定义其他先前选定的图像周围的边界。(重新定义，我的意思是使它半透明，以阻止图像移动)。

下面是一个JSFiddle：http://jsfiddle.net/bewWF/，否则您可能会看到下面的代码。

<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() {
    $('#AnySun, #FullSun, #PartShade, #FullShade').on('click', function() {
        $(this).addClass('hover').siblings('img').removeClass('hover');
        $('#SelSunlight').val(this.id);
    });
});

FIDDLE

Answer 2

我优化了你所有的代码。由于您使用的是CSS :hover，所以不需要在悬停边框中使用jQuery。我将class="sun"添加到每个映像中，这样您就不需要使用$(".sun")而不用使用较慢的.each了。我使用jQuery的.click代替onclick和.prop来获得单击的.sun的name属性。我为演示更改了选定的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/

Answer 3

在选择当前边框之前，可以清除所有边框。这就是你要找的吗？

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/