0

这是我到目前为止所拥有的。 http://jsfiddle.net/nSfWs/

现在，当用户单击产品 div 时，通过将“selected”类添加到产品 div 会出现绿色框。我还希望将“未选择”类添加到剩余的两个未选择的产品 div 中。因此，一个 div 将具有绿色框/边框，而另外两个将使用不透明度过滤器淡化。

有人可以帮我完成这项工作吗？这似乎很简单，但它让我发疯。谢谢！

对于那些不想点击 jsfiddle 链接的人，这里是代码。

<style type='text/css'>
    div.product {
    display:inline-block;  
    vertical-align:top;
    text-align:center;
    width:auto;
    margin:0 47px 0 0;
    padding:24px 22px 20px 27px;
    border:1px solid transparent;
    }

    div.product:last-child {
    margin:0px;
    }

    div.product:hover {
    border:1px solid #878787;
    -moz-border-radius:3px;
    border-radius:3px;
    }

    div.product.unselected {
    opacity:0.6;
    filter:alpha(opacity=60);
    }

    div.product.selected {
    border:1px solid #32a24e;
    -moz-border-radius:3px;
    border-radius:3px;
    }
</style>    
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        $(".product").click(function () {
            $(this).toggleClass("selected");
        });
    });//]]>
//]]>  

</script>

<div class="product">
    <div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">1</div>
</div>

<div class="product">
    <div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">2</div>
</div>

<div class="product">
    <div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Plectrophenax_nivalis1.jpg/320px-Plectrophenax_nivalis1.jpg" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">3</div>
</div>
4

5 回答 5

6

只需从兄弟姐妹中删除类：

    $(".product").click(function () {
        $(this).toggleClass('selected').siblings().removeClass("selected");
    });
于 2013-10-08T05:41:44.737 回答
1

只需在点击事件中从其他 div 中删除该类，

$(window).load(function(){
    $(".product").click(function () {
        $(".product").removeClass("selected")
        $(this).toggleClass("selected");
    });
});

你也可以切换其他类，

$(".product").click(function () {
        $(".product").not(this).removeClass("selected").addClass('unselected')
        $(this).toggleClass("unselected").toggleClass("selected");
});

见我已编辑

于 2013-10-08T05:41:31.077 回答
0

尝试这个

$(window).load(function(){
    $(".product").click(function () {
        $(".product").removeClass("selected").addClass("unselected");
        $(this).removeClass("unselected").addClass("selected");
    });
});

小提琴

于 2013-10-08T05:47:45.633 回答
0

尝试使用siblings()改变剩余divs的类。

$(this).siblings("product").addClass("unselected");

于 2013-10-08T05:43:40.813 回答
0

尝试这个：

$(".product").click(function () {
    $(".product").removeClass("unselected");
    $(".product").removeClass("selected");
    $(this).addClass("selected").siblings().addClass("unselected");
});

小提琴

于 2013-10-08T05:46:05.360 回答