0

これが私がこれまでに持っているものです。 http://jsfiddle.net/nSfWs/

現在、ユーザーが製品 div をクリックすると、「選択済み」クラスが製品 div に追加されて緑色のボックスが表示されます。また、「選択されていない」クラスが追加され、選択されていない2つの製品divが残ります。したがって、1 つの div には緑色のボックス/ボーダーがあり、他の 2 つの 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

0

siblings()を使って残りの のクラスを変更してみてくださいdiv。

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

于 2013-10-08T05:43:40.813 に答える
0

これを試して

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

フィドル

于 2013-10-08T05:47:45.633 に答える