項目jQuery的變化不透明度，如果不選擇

Question

選擇我有一個選擇如下：

<select> 
<option value="cat-1">cat 1</option> 
<option value="cat-2">cat 2</option> 
<option value="cat-3">cat 3</option> 
</select> 

我有內容的div：

<div class="cat-1"> 
<div class="cat-2"> 
<div class="cat-3"> 

我想改變項目的不透沒有被選中，所以如果選擇更改爲cat-1，那麼div的cat-2和cat-3的透明度發生了變化

我有以下JS更改所選div的不透明度，我只需要到了ND它做相反

$("#shoe-men,#shoe-women,#shoe-kids").on('change', function() { 
var $Select = $(this).val(); 
$('.'+$Select).css('opacity','1'); 
}); 

任何幫助，將理解

Answer 1

看來你已經給<select>在原始碼的ID，所以你可以使用：

$('#cat-sel').change(function(){ 
    $('#cat-sel option').each(function() { 
     if($(this).prop('selected')){ 
      $('.'+$(this).val()).css('opacity',1); 
     }else{ 
      $('.'+$(this).val()).css('opacity',0.2); 
     } 
    }) 
}) 

小提琴：https://jsfiddle.net/Frederick888/7zh11gqc/

Answer 2

可以將所有的div不透明度設定爲期望的量（0.4例如），則所選擇的不透明度只是設置爲1：

$("#shoe-men,#shoe-women,#shoe-kids").on('change', function() { 
     var $Select = $(this).val(); 
     $('.cat-1, .cat-2, .cat-3').css('opacity', '.4'); 
     $('.'+$Select).css('opacity','1'); 
    }); 

小提琴這裏：http://jsfiddle.net/o6cau211/1/

Answer 3

給予他們一類是相同的，然後使用.not()

<div class="cat cat-1"> 
<div class="cat cat-2"> 
<div class="cat cat-3"> 

然後

$("#shoe-men,#shoe-women,#shoe-kids").on('change', function() { 
    var $Select = $(this).val(); 
    var $cat = $('.'+$Select) 
    $cat.css('opacity','1'); 

    // now add: 
    $(".cat").not($cat).css('opacity', '0.5'); 
});