1

それが私がソートしようとしているコードです。クラス終了でdivを非表示にし、「1265以上」ボタンをクリックして再度表示するには、すべてのボタンが必要です。

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

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

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

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

          <!-- scripts at bottom of page -->


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

          <section id="content">

            <h1>Find your topload Tester</h1>
            <h3>Customize your datasheet according to your sample's dimensions</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>
            <br>
            <br>
            <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>
            <br>
          <br>
            <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>
            <br>
            <br>

            <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 blue">Datasheet1</div>

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

                <div id="data3" class="width-height-depth 50l 25l 10l ">Datasheet3</div>

                <div id="exit" class="width-height-depth 1265">This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements</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: '#data1,#data2 , #data3'
            });

            // 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;
            });



          });



        </script>


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

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


        </body>
        </html>

私はあなたの解決策を試しました。ほとんど機能していますが、「1265 以上」ボタンを押すと、テキストが再び表示されません。display:none プロパティが適用されているようです。

4

1 に答える 1

0

removeの意味がhideである場合、それは非常に簡単です。

  1. まず、要素を非表示にする「すべて」ボタンをクリックしてハンドラをバインドします。

  2. select次に、要素の変更時に別のハンドラーをバインドします。値が適切かどうかを確認してから表示します。

コードは次のようになります。

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

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

  });

  $('select').on('change', function(){

    if( $(this).val() === '{your-appropriate-value}' ) $('#exit').show();

  });

Working demo

編集

質問を編集したので、より具体的な回答を差し上げます。将来、同様のものを検索する可能性のある人のために、私の一般的な回答を保持します.

やりたいことを行うために、上記のコードで変更する必要があるのは次のとおりです。

  1. クリック機能を にバインドしますa#all。

  2. 2 番目の関数を 1 回のクリックにバインドし、.filter a適切かどうかを確認して表示します。正直に言うと、これはまったく必要ありません。#filter-height-1265すべての要素にid. ただし、より一般的な回答を提供しているので、微調整する必要がある場合は要点がわかります。

  3. また、この場合、関数をreturn false.

コードは次のようになります。

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

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

  });

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

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

  });
于 2013-03-19T13:32:59.823 に答える