Question

我是Javascript / Jquery的新手，所以当我尝试解释我遇到的问题时，请耐心等待。

基本设置： - #middle div - 包含一个包含4个类别（艺术家，工具，位置和样式）的菜单。每个类别下面都有多个复选框。 - #right div - 包含一个缩略图图片库，其中包含在css中设置50％不透明度的灰度滤镜。

目标：当用户选择任何类别的复选框之一时，相应的图像将根据复选框的选择显示/隐藏。在显示时，图像更改为以100％不透明度过滤无。

我可以让每个复选框在独立的基础上显示/隐藏图像，但我想找到一种方法，只显示与选中的选项共享同一类的图像。例如，如果您选择artistName1和Location1，则只会显示在这两个选项之间共享的图像，但是现在所有的artistName1图像和Location1的所有图像都会显示。通过不同的论坛阅读后，我正在寻找一种方法来交叉这些。

使用Javascript： $（document）.ready（function（）{ “使用严格”;

  //begin Artist Name 1
  $('#Broderick').val($(this).is(':checked'));

  $('#Broderick').change(function() {
        if ($(this).is(':checked')) {
          $('.Brod').css({
            filter: 'none',
            opacity: '1'
          });
          $('.Brod').parent().next().css({
            opacity: '.8'
          });
        } else {
          $('.Brod').removeAttr('style');
          $('.Brod').parent().next().removeAttr('style');
        }

        //begin Artist Name 2 
        $('#Kenny').val($(this).is(':checked'));

        $('#Kenny').change(function() {
              if ($(this).is(':checked')) {
                $('.Kenn').css({
                  filter: 'none',
                  opacity: '1'
                });
                $('.Kenn').parent().next().css({
                  opacity: '.8'
                });
              } else {
                $('.Kenn').removeAttr('style');
                $('.Kenn').parent().next().removeAttr('style');
              }

              //begin Location 1
              $('#Northeast').val($(this).is(':checked'));

              $('#Northeast').change(function() {
                    if ($(this).is(':checked')) {
                      $('.NE').css({
                        filter: 'none',
                        opacity: '1'
                      });
                      $('.NE').parent().next().css({
                        opacity: '.8'
                      });
                    } else {
                      $('.NE').removeAttr('style');
                      $('.NE').parent().next().removeAttr('style');
                    }

               //begin Location 2
                    $('#Southeast').val($(this).is(':checked'));

                    $('#Southeast').change(function() {
                      if ($(this).is(':checked')) {
                        $('.SE').css({
                          filter: 'none',
                          opacity: '1'
                        });
                        $('.SE').parent().next().css({
                          opacity: '.8'
                        });
                      } else {
                        $('.SE').removeAttr('style');
                        $('.SE').parent().next().removeAttr('style');
                      }

                    });

在复选框选择时，需要在显示/隐藏时交叉多个图像

0 个答案: