Onclick切換選定的DIV的類和更改未選定的DIV的類

這是我到目前爲止。 http://jsfiddle.net/nSfWs/Onclick切換選定的DIV的類和更改未選定的DIV的類

現在，當用戶點擊一個產品div時，綠色框通過將「selected」類添加到產品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>

來源

2013-10-08 christine

是否這樣？ http://jsfiddle.net/nSfWs/4/ –

只是刪除從上單擊事件等的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

來源

2013-10-08 05:41:31

簡單從兄弟姐妹中刪除班級：

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

來源

2013-10-08 05:41:44

嘗試使用siblings()來更改剩餘的div s的類別。

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

來源

2013-10-08 05:43:40 Aashray

試試這個：

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

Fiddle

來源

2013-10-08 05:46:05 Greenhorn

謝謝！這工作完美。 – christine

試試這個

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

Fiddle

來源

2013-10-08 05:47:45 otezz

Onclick切換選定的DIV的類和更改未選定的DIV的類

回答

相關問題