如果在select中未选择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，则divs 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

您似乎在原始代码中为<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

给他们一个相同的类，然后使用.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 3

您可以将所有divs不透明度设置为所需的金额(例如，.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/