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() {
    $('#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 border red。

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/

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

3 个答案: