重新定义图像的边框不再被选中

Question

我正在创建一个表单，其中一些元素是图像。将鼠标悬停在上方时，有一条 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

我优化了你所有的代码。由于您使用的是 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/

Answer 2

看起来你可以简化很多：

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

FIDDLE

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/