So I have a store web page and I'm trying to add jQuery to select and show specific items when a radio button is selected using a switch function. For some reason it is not working. When I run the code it's not doing anything and just shows all the products listed no matter what radio button is selected. I can't seem to figure out why it's not working. Any suggestions?
<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;
}
}
}
So .show() function can’t take any arguments or elements -what ever you need to call it- so products.show(accesory_products); is totally wrong beacuse what it will do is: do nothing with the argument you give and show products. Thats what it is, so make it like this accesory_products.show(); hope it helps !