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. 将您的第二个功能绑定到单击，.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 回答