使用jQuery结合switch语句与单选按钮实现商品显隐失败求助

Hey there! Let's figure out why your radio button-based product filter (using jQuery and a switch statement) isn't working—sounds like all products stay visible no matter which option you select. Here are the most common issues to check:

1. Incorrect Radio Button Event Binding or Value Retrieval #

• First, make sure your event listener is targeting the right radio buttons. If your radios share a name attribute (which they should, for proper radio group behavior), use that to select them:

  $('input[name="product-category"]').on('change', function() {
    // Your switch logic here
  });
  

• Double-check that you're grabbing the selected value correctly inside the event handler. If you use something like var selectedVal = $(this).val();, confirm that this actually returns the correct value of the checked radio (not undefined).

2. Missing break Statements in Your Switch Case #

This is a super common gotcha! If you forget to add break; after each case, the code will fall through to every subsequent case, ending up showing all products. For example:

// Wrong - no breaks, so all cases run
switch(selectedVal) {
  case "books":
    $('.product-books').show();
  case "electronics":
    $('.product-electronics').show();
  default:
    $('.product').show();
}

// Correct - breaks stop execution after each case
switch(selectedVal) {
  case "books":
    $('.product').hide();
    $('.product-books').show();
    break;
  case "electronics":
    $('.product').hide();
    $('.product-electronics').show();
    break;
  default:
    $('.product').show();
}

3. Mismatched Selectors for Product Elements #

• Verify that the class names (or other selectors) you're using in your jQuery show()/hide() calls exactly match the classes on your product elements. If your product for books has a class of product-book but your code targets product-books, nothing will be hidden/shown correctly.
• Also, check your initial state: Did you hide all products on page load before showing the default selection? If not, switching radios will just add more visible products instead of replacing them. Add something like $('.product').hide(); inside your $(document).ready() function before handling the default selection.

4. jQuery Loading or DOM Ready Issues #

• Ensure jQuery is loaded before your custom script. If your script runs before jQuery is available, none of your code will execute.
• Wrap all your filter code inside a $(document).ready() block to make sure it runs only after the DOM is fully rendered:

  $(document).ready(function() {
    // Your radio button event listener and switch logic here
  });
  

If you can share the full HTML of your radio buttons and product elements, plus your complete jQuery code, we can narrow this down even further!

内容的提问来源于stack exchange，提问作者louisebelcher