使用jquery和复选框显示/隐藏多个div

2 回答

• 0

  filter, meet schmilter

  jQuery的：

  var puts = $('.checkboxes input[type=checkbox]');//checkboxes
  var cans = $('.box-shadow');//content blocks
  var schmilt = true;//set false for filtering instead of schmiltering
  function schmilter() {
      puts.each(function() {//get checkboxes
          var cl = $(this).attr('id');//get id
          if (this.checked) { $('.'+cl).addClass('show'); }//if checked show
          else { $('.'+cl).addClass('hide'); }//if !checked hide
          if (!$('.'+cl).length) { $(this).prop('checked',false).parent('li').hide(); }//if class doesn't exist uncheck/hide invalid options
      });
      cans.each(function() {//get all content blocks
          if(schmilt) {//if schmilt
              if($(this).hasClass('hide')) { $(this).fadeOut('fast').removeClass('hide show'); }//hide
              else if ($(this).hasClass('show')) { $(this).fadeIn('fast').removeClass('show'); }//show
          } else {//if !schmilt
              if($(this).hasClass('show')) { $(this).fadeIn('fast').removeClass('hide show'); }//show
              else if ($(this).hasClass('hide')) { $(this).fadeOut('fast').removeClass('hide'); }//hide   
          }
      });
  }
  schmilter();//initial run
  puts.on('change', function() { schmilter(); });//on change run schmilter
  $('#reset').on('click', function() {//click reset
      puts.prop('checked', true);//check all
      schmilter();//run schmilter
  });
  

  这将查看所有选中/未选中的框，分配 hide 和 show 的类 . 如果容器具有 hide ，则它将被隐藏，并且 hide 和 show 将被删除 . 如果它只有 show ，则显示它并删除 show .

  当您设置 schmilt = false 时，它将执行相反的操作并提供典型的过滤功能 .

  如果它们不适用于任何现有容器，它也将删除选择 .

  我重写了html以使其更有意义，就像@scrowler提到的那样，但更进一步 . 我在复选框和内容之间添加了相应的ID /类 . 因此，如果一个复选框的id为 #edit ，则相应的内容容器都具有 .edit 类

  HTML：

  <ul class="checkboxes">
      <li class="dropper">
          <label for="projman">Project Management</label>
          <input id="projman" type="checkbox" checked="checked" name="projman" />
      </li>
      <li>
          <label for="copywriting">Copywriting</label>
          <input id="copywriting" type="checkbox" checked="checked" name="copywriting" />
      </li>
      <li>
          <label for="design">Design</label>
          <input id="design" type="checkbox" checked="checked" name="design" />
      </li>
      <li>
          <label for="editing">Editing</label>
          <input id="editing" type="checkbox" checked="checked" name="editing" />
      </li>
      <li>
          <label for="multimedia">Multimedia</label>
          <input id="multimedia" type="checkbox" checked="checked" name="multimedia" />
      </li>
      <li>
          <label for="advertising">Advertising</label>
          <input id="advertising" type="checkbox" checked="checked" name="advertising" />
      </li>
      <li>
          <label for="consultancy">Consultancy</label>
          <input id="consultancy" type="checkbox" checked="checked" name="consultancy" />
      </li>
      <li class="dropper"><a href="javascript:void(0);" id="reset">Reset</a>
      </li>
  </ul>
  <div class="box-shadow copywriting design editing">
      <div class="caption">
           <h3>Scottish Hosteler Magazine</h3>
           <h4>Scottish Youth Hostel Association</h4>
          <p><a href="case-study-L1.php">Find out more &gt; &gt;</a>
          </p>
      </div>
      <img src="img/tile1.jpg" />
  </div>
  <div class="box-shadow copywriting design">
      <div class="caption">
           <h3>Scottish Dental Magazine</h3>
           <h4>Scottish Dental</h4>
          <p><a href="case-study-L2.php">Find out more &gt; &gt;</a>
          </p>
      </div>
      <img src="img/tile2.jpg" />
  </div>
  

  做了一个小提琴：http://jsfiddle.net/filever10/4NS3A/

  回复于 2024-04-28T05:19:21+08:00
• 2

  您要将 #box1 ， #box2 等唯一ID分配给HTML中禁止的多个元素，使用要对多个元素应用引用的类 .

  在您的情况下，我假设您要将jQuery处理程序应用于复选框元素，请尝试以下操作：

  <li class="dropper">
      <label for="box1">Project Management</label>
      <input id="box1" type="checkbox" checked="checked" name="checkbox-01">
  </li>
  

  • 我删除了空格，因为它是空的并复制了一个唯一的ID，我删除了锚标记，因为它似乎也没用 .

  回复于 2024-04-28T05:19:21+08:00