0

これでページを編集し、ここにコードを配置しました：

クラス「all」のすべてのリンクがクリックされたときに、divを非表示にしようとしています。

IDが「all」のすべてのアンカーをクリックしてdiv＃containerを非表示にした場合にのみ必要です。

            <!doctype html>
        <html lang="en">
        <head>

          <meta charset="utf-8" />
          <title>Combination filters &middot;</title>

          <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->


          <link rel="stylesheet" href="../css/style.css" />



        </head>
        <body class="demos ">

          <section id="content">

            <h1>Find your top-load Tester</h1>
            <h3>Potential description Text</h3>


        <section id="options" class="clearfix combo-filters">




            <div class="option-combo height">
              <h4>Height (mm)</h4>
              <ul class="filter option-set clearfix " data-filter-group="height"> 
                <li><a id="all" href="#filter-height-any" data-filter-value="*" class="selected">All</a>

                  <li><a href="#filter-height-525" data-filter-value=".525">525 or less</a>

                  <li><a href="#filter-height-645" data-filter-value=".645">645 or less</a>

                  <li><a href="#filter-height-1265" data-filter-value=".1265">more than 1265</a>

              </ul>
            </div>

            <div class="option-combo width">
              <h4>Width &nbsp;(mm)</h4>
              <ul class="filter option-set clearfix " data-filter-group="width"> 
                <li><a id="all" href="#filter-width-any" data-filter-value="" class="selected">All</a>

                  <li><a href="#filter-width-134" data-filter-value=".134w">134 or less</a>

                  <li><a href="#filter-width-190" data-filter-value=".190w">190 or less</a>

                  <li><a href="#filter-width-290" data-filter-value=".290w">290 or less</a>

                  <li><a href="#filter-width-328" data-filter-value=".328w">328 or less</a>

                  <li><a href="#filter-width-420" data-filter-value=".420w">420 or more</a>

              </ul>
            </div>

            <div class="option-combo depth">
              <h4>Depth (mm)</h4>
              <ul class="filter option-set clearfix " data-filter-group="depth"> 
                <li><a id="all" href="#filter-depth-any" data-filter-value="" class="selected">All</a>

                  <li><a href="#filter-depth-134" data-filter-value=".134d">134 or less</a>

                  <li><a href="#filter-depth-190" data-filter-value=".190d">190 or less</a>

                  <li><a href="#filter-depth-290" data-filter-value=".290d">290 or less</a>

                  <li><a href="#filter-depth" data-filter-value=".328d">328 or less</a> 

                  <li><a href="#filter-depth-420" data-filter-value=".420d">420 or more</a>           
              </ul>
            </div>


            <div class="option-combo load">
              <h4>Load (kN)&nbsp;&nbsp;&nbsp;&nbsp;</h4>
              <ul class="filter option-set clearfix " data-filter-group="load"> 
                <li><a id="all" href="#filter-load-any" data-filter-value="" class="selected">All</a>

                  <li><a href="#filter-load-2.5" data-filter-value=".2-5l">2.5 or less</a>

                  <li><a href="#filter-load-5" data-filter-value=".5l">5 or less</a>

                  <li><a href="#filter-load-10" data-filter-value=".10l">10 or less</a>

                  <li><a href="#filter-load-25" data-filter-value=".25l">25 or less</a> 

                  <li><a href="#filter-load-50" data-filter-value=".50l">50 or more</a>           
              </ul>
            </div>


        </section> <!-- #options -->

        <div id="container" class="clearfix">

                <div id="data1" class="width-height-depth 525 134w 290w 290d 134d 2-5l">Datasheet1</div>

                <div id="data2" class="width-height-depth 645 190w 328w 328d 190d 5l">Datasheet2</div>

                <div id="data3" class="width-height-depth   525 50l 25l 10l 190w  328w 190d 328d   645 50l 25l 10l 134w  290w 134d 290d  ">Datasheet3</div>



                <div id="exit" class="width-height-depth 525 645 1265 420d 420w">This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements</div>

                    <div id="intro" class="width-height-depth">Please specify</div>


        </div> <!-- #container -->

        <script src="../js/jquery-1.7.1.min.js"></script>
        <script src="../jquery.isotope.min.js"></script>
        <script>
          $(function(){

            var $container = $('#container'),
                filters = {};

            $container.isotope({
              itemSelector : '.width-height-depth',

              masonry: {
                columnWidth: 80
              },
              filter: '#intro'
            });

            // filter buttons
            $('.filter a').click(function(){
              var $this = $(this);
              // don't proceed if already selected
              if ( $this.hasClass('selected') ) {
                return;
              }

              var $optionSet = $this.parents('.option-set');
              // change selected class
              $optionSet.find('.selected').removeClass('selected');
              $this.addClass('selected');

              // store filter value in object
              // i.e. filters.color = 'red'
              var group = $optionSet.attr('data-filter-group');
              filters[ group ] = $this.attr('data-filter-value');
              // convert object into array
              var isoFilters = [];
              for ( var prop in filters ) {
                isoFilters.push( filters[ prop ] )
              }
              var selector = isoFilters.join('');
              $container.isotope({ filter: selector });

              return false;
            });

             $('a').on('click', function(){

                $('#exit').hide();
                return false;

              });

              $('.filter a').on('click', function(){

                if( $(this).data('filter-value') == '.1265'  ) $('#exit').show();
                return false;



              });

              $('.filter a').on('click', function(){

                if( $(this).data('filter-value') == '.420d'  ) $('#exit').show();
                return false;



              });

                $('.filter a').on('click', function(){

                if( $(this).data('filter-value') == '.420w'  ) $('#exit').show();
                return false;



              });

                 $('.filter a').on('click', function(){

                 $('#intro').hide();
                return false;



              });








                          });



        </script>


            <footer>
             <p>If you cant find what you are looking for blah blah blah....</p>
            </footer>

          </section> <!-- #content -->


        </body>
        </html>

前もって感謝します。

4

3 に答える 3

6 
$('a.all').on('click', function(event) {
    var all_alls = $('a.all');
    var clicked_alls = $('a.all[data-clicked="true"]');
    if (all_alls.length == clicked_alls.length) {
        $('#exit').hide();
    }
    else {
        $(this).attr('data-clicked', 'true');
    }
});
于 2013-03-20T15:18:31.337 に答える
1

Markup:

<ul>
  <li><a href="#" class="all">Link</a></li>
  <li><a href="#" class="all">Link</a></li>
  <li><a href="#" class="all">Link</a></li>
</ul>
<div id="divToHide">Click all links to hide me</div>

JS:

var $links = $('.all');

$links.click(function(e){

  e.preventDefault();

  $(this).addClass('.clicked');

  if($links.length == $('.all.clicked').length){

    $('#divToHide').hide();

  }

})

Fiddle.

于 2013-03-20T15:21:02.363 に答える
0

「all」クラスの div の 1 つをクリックすると、.addClass を使用して「クリックされた」クラスを追加できます。毎回、「all」クラスのすべての div も「クリック」されているかどうかも確認します。もしそうなら、隠したいdivを隠すことができます。

于 2013-03-20T15:18:07.853 に答える