使用 switch 语句和单选按钮使用 jQuery 到 hide/show 产品

Question

所以我有一个商店网页，我正在尝试将 jQuery 添加到 select 并在使用切换功能 selected 单选按钮时显示特定项目。由于某种原因，它不起作用。当我运行代码时，它没有执行任何操作，只是显示列出的所有产品，无论 select 编辑了哪个单选按钮。我似乎无法弄清楚为什么它不起作用。有什么建议吗？

<div class="section group">
    <div class="col span_1_of_6">
    </div>
    <div class="col span_1_of_6">
     <div>
      <h4>Filter</h4>
     </div>
     <div>
      Category:<br />
      <input type="radio" name="category_filter" value="all" checked="checked">&nbsp;All</input><br />
      <input type="radio" name="category_filter" value="accessory">&nbsp;Accessory<br />
      <input type="radio" name="category_filter" value="hardware">&nbsp;Hardware<br />
      <input type="radio" name="category_filter" value="mobile">&nbsp;Mobile App<br />
      <input type="radio" name="category_filter" value="software">&nbsp;Software<br />
     </div>
    </div>
    <div class="col span_3_of_6">
     <h4>Products</h4>

     <div class="product_listing" data-category="accessory" data-quantity="9">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/backpack.jpg" alt="Backpack thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">The NeverNot Backpack</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.00</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="accessory" data-quantity="100">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/bag.jpg" alt="Bag thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">The NeverNot Bag</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.00</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="software">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/nevernot_business.jpg" alt="NeverNot Premium thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">NeverNot Premium 1-month Subscription</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.00</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="software">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/nevernot_business.jpg" alt="NeverNot Business thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">NeverNot Business Subscription</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">5.00</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="mobile">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/nevernot_premium.jpg" alt="NeverNot Premium thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">NeverNot for iPad</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.99</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="software">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/nevernot_business.jpg" alt="NeverNot Premium thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">NeverNot Premium 1-year Subscription</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.00</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="mobile">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/nevernot_premium.jpg" alt="NeverNot Premium thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">NeverNot for iPhone</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.99</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="mobile">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/nevernot_premium.jpg" alt="NeverNot Premium thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">NeverNot for Android</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.99</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="hardware" data-quantity="2">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/scanner.jpg" alt="Scanner thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">ScanSnap NeverNot Edition</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">5.00</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="hardware" data-quantity="12">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/stylus.jpg" alt="Stylus thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">NeverNot Stylus</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.00</div>
      </div>
      </a>
     </div>

     <div class="product_listing" data-category="accessory" data-quantity="7">
      <a href="detail.html">
      <div class="product_image">
       <img src="img/wallet.jpg" alt="Wallet thumbnail" />
      </div>
      <div class="product_info">
       <div class="product_name">Wallet</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <div class="product_price">.00</div>
      </div>
      </a>
     </div>

    </div>
    <div class="col span_1_of_6">
    </div>
   </div>

  </div>
 </div>

     $(document).ready( function() {

  var products = $('.product_listing');
  var low_quantity = products.filter(function () {
        return $(this).data('quantity') < 20;

    });
$(low_quantity).addClass("inventory_low");

var accessory_products = products.filter(function () {
    return $(this).data('category') == 'accesory';
});
var hardware_products = products.filter(function () {
    return $(this).data('category') == 'hardware';
});
var mobile_products = products.filter(function () {
    return $(this).data('category') == 'mobile';
});
var software_products = products.filter(function () {
    return $(this).data('category') == 'software';
});

$('input').on('change', function () {
  switch($(this).val()) {
    case 'all':
      products.show();
      break;
    case 'accessory':
      products.hide();
      accessory_products.show();
      break;
    case 'hardware':
      products.hide();
      hardware_products.show();
      break;
    case 'mobile':
      products.hide();
      mobile_products.show();
      break;
    case 'software':
      products.hide();
      software_products.show();
      break;
    }
  }
}

Answer 1

我会说，如果可能的话，尽量避免完全切换。只过滤并显示应该显示的内容。

$(document).ready(function() {
  var products = $('.product_listing li');
  
  $('input').on('change', function(){
    var thiz = this;
    
    products.hide().filter(function(){
      return thiz.value == 'all' || this.dataset.category == thiz.value;
    }).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="filter" value="all" checked> All
  <input type="radio" name="filter" value="accessory"> Accessories
  <input type="radio" name="filter" value="hardware"> Hardware
  <input type="radio" name="filter" value="mobile"> Mobile
  <input type="radio" name="filter" value="software"> Software
</div>
<div>
  <ul class="product_listing">
    <li data-category="accessory">A1</li>
    <li data-category="accessory">A2</li>
    <li data-category="hardware">H1</li>
    <li data-category="hardware">H2</li>
    <li data-category="mobile">M1</li>
    <li data-category="mobile">M2</li>
    <li data-category="software">S1</li>
    <li data-category="software">S2</li>
  </ul>
</div>

Answer 2

所以 .show() 函数不能接受任何参数或元素 - 无论你需要调用它什么 - 所以 products.show(accesory_products); 是完全错误的，因为它会做的是：不对参数做任何事情您提供并展示产品。就是这样，所以就这样吧accesory_products.show();希望对你有帮助！

使用 switch 语句和单选按钮使用 jQuery 到 hide/show 产品

Using jQuery to hide/show products using a switch statement and radio buttons

jquery

switch-statement

show-hide