顯示的div某些種類的基礎上覆選框

該網頁具有定義電影的特性，例如，「喜劇」，「戲劇」，「英語」複選框，「西班牙」。當用戶點擊其中一個複選框時，具有相同類別的div將顯示在頁面上。

以下是我在合理的方式執行時遇到的問題：如果用戶選擇第二個複選框，顯示的div應該進行一些「過濾」。換句話說，如果用戶首先選擇了「戲劇」，然後是「英語」，那麼只有那些具有類別類別的div應該保持可見。

這裏是我到目前爲止的代碼（它會簡單地打開/關閉的「喜劇」的div）：

<!doctype html> 
 

 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Movies</title> 
 
    <link href="styles.css" type="text/css" rel="stylesheet" /> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> \t 
 
</head> 
 

 
<body> 
 

 
<div id="wrapper"> 
 
    <div id="content"> 
 

 
     <div id="heading"> 
 
      <h1 class="inline">Movies</h1> 
 
     </div> 
 

 
     <div id="selections"> 
 
      <label><input type="checkbox" value="comedy">Comedy</input></label> 
 
      <label><input type="checkbox" value="drama">Drama</input></label> 
 
      <label><input type="checkbox" value="english">English</input></label> 
 
      <label><input type="checkbox" value="spanish">Spanish</input></label> 
 
     </div> 
 

 
     <div id="movies"> 
 
      <div class="comedy english">Comedy in english.. content</div> 
 
      <div class="comedy spanish">Comedy in spanish.. content</div> 
 
      <div class="drama spanish">Drama in spanish.. content</div> 
 
      <div class="drama english">Drama in english.. content</div> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
    <script> 
 
     $(document).ready(function(){ 
 
      $('#movies div').toggle(); //hides movie content in the beginning 
 

 
      $('input[type="checkbox"]').click(function(){ 
 
       if($(this).attr("value")=="comedy"){ 
 
       $('.comedy').toggle(); 
 
       } 
 
      }) 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

來源

2014-11-21 Antti

每HAPS簡單的解決方案

http://jsfiddle.net/goqqosf8/2/

$(document).ready(function(){ 
    $('#movies div').hide(); //hides movie content in the beginning 

    $('input[type="checkbox"]').click(function(){ 
     select() 
    }) 
}); 

function select() 
{ 
    $('#movies div').hide(); 

    var $div=$('#movies div'); 
    var check=false;  
    $('input[type="checkbox"]:checked').each(function(){ 
      var css=$(this).val();      
      $div=$div.filter('.'+css); 

     check=true; 
    }) 

    if(check==true) $div.show();  
}

來源

2014-11-21 03:50:53 dm4web

謝謝，它的工作原理！選擇這個答案，因爲它更簡單。 – Antti 2014-11-21 04:20:24

嘗試

$(document).ready(function() { 
 
    var $movies = $('#movies div').hide(); //hides movie content in the beginning 
 

 
    var $checks = $('input[type="checkbox"]').change(function() { 
 
    if ($checks.filter(':checked').length) { 
 
     //use the types to gilter them 
 
     var $selected = filter($movies, '.genre'); 
 
     $selected = filter($selected, '.language'); 
 
     $selected.show(); 
 
     $movies.not($selected).hide() 
 
    } else { 
 
     $movies.hide() 
 
    } 
 
    }); 
 

 
    function filter($src, type) { 
 
    var selection = $checks.filter(type + ':checked').map(function() { 
 
     return '.' + this.value; 
 
    }).get(); 
 
    console.log(type, $src, selection) 
 
    return selection.length ? $src.filter(selection.join(',')) : $src; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="content"> 
 
    <div id="heading"> 
 
     <h1 class="inline">Movies</h1> 
 
    </div> 
 
    <div id="selections"> 
 
     <!--Add a type class to the checkboxes--> 
 
     <label><input type="checkbox" value="comedy" class="genre">Comedy</label> 
 
     <label><input type="checkbox" value="drama" class="genre">Drama</label> 
 
     <label><input type="checkbox" value="english" class="language">English</label> 
 
     <label><input type="checkbox" value="spanish" class="language">Spanish</label> 
 
    </div> 
 
    <div id="movies"> 
 
     <div class="comedy english">Comedy in english.. content</div> 
 
     <div class="comedy spanish">Comedy in spanish.. content</div> 
 
     <div class="drama spanish">Drama in spanish.. content</div> 
 
     <div class="drama english">Drama in english.. content</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-11-21 02:45:17

顯示的div某些種類的基礎上覆選框

回答

相關問題