因此，我有一个商店网页，我正在尝试添加jQuery以选择和显示特定项目时，使用开关功能选择了广播按钮。由于某种原因，它不起作用。当我运行代码时，它没有做任何事情，只能显示出所有列出的产品，无论选择哪种广播按钮。我似乎无法弄清楚为什么它不起作用。有什么建议吗？
<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"> All</input><br />
<input type="radio" name="category_filter" value="accessory"> Accessory<br />
<input type="radio" name="category_filter" value="hardware"> Hardware<br />
<input type="radio" name="category_filter" value="mobile"> Mobile App<br />
<input type="radio" name="category_filter" value="software"> 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">$75.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">$45.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">$8.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">$125.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">$4.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">$39.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">$1.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">$1.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">$225.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">$75.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">$35.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;
}
}
}
，所以 .show()函数不能采用任何参数或元素 - 您需要称呼它 - 因此 products.show(accesory_products);完全是错误的，beaccuse beaccuse它将做的事情是：对您给出的参数无所作为并显示产品。多数民众赞成在就是这样，所以像这个accesory_products.show();一样，希望它能有所帮助！
我会说，如果可能的话，请尝试完全避免开关。只需过滤并显示应显示的。
$(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>