使用jQuery使用switch语句和单选按钮隐藏/显示产品

时间：2018-04-04 20:42:37

标签： jquery switch-statement show-hide

所以我有一个商店网页，我正在尝试添加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">&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">$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;
    }
  }
}

2 个答案:

答案 0 :(得分：0)

我会说尽可能尝试完全避免切换。只需过滤并显示应显示的内容。

＆＃13;
＆＃13; 
$(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();
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

所以.show()函数不能接受任何参数或元素 - 你需要调用它 - 所以products.show(accesory_products);是完全错误的，因为它会做的是：对你给出的参数不做任何处理并展示产品。这就是它，所以让它像这样accesory_products.show();希望它有所帮助！

相关问题
最新问题