0

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

4

3 回答 3

1

看起来你可以简化很多：

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

小提琴

于 2013-02-13T00:40:14.293 回答
1

我优化了你所有的代码。由于您使用的是 CSS :hover，因此您不需要将 jQuery 用于悬停边框。我添加class="sun"到每个图像中，这样您就不需要使用$(".sun")较慢的.each. 我使用 jQuery.click替换onclick并.prop获取 clicked 的名称属性.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/

于 2013-02-13T00:42:36.087 回答
0

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

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/

于 2013-02-13T00:32:20.420 回答