Question

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

现在，当用户点击产品div时，通过将“selected”类添加到product 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>

Answer 1

只需从兄弟姐妹中删除该课程：

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

Answer 2

只需在点击事件

上从其他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");
});

见我have edited

Answer 3

尝试使用siblings()更改剩余的div的类。

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

Answer 4

试试这个：

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

<强> Fiddle

Answer 5

试试这个

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

Fiddle

Onclick切换选择div的类并更改未选择的div的类

5 个答案: