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的不透明度，我只需要修改它做相反的

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

如有任何帮助，不胜感激

Answer 1

给它们一个相同的类，然后使用.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');
});

Answer 2

看来你已经给了<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 3

您可以将所有div的不透明度设置为所需的量。)，然后将选择的不透明度设置为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/