JavaScript类方法去重优化及jQuery二分类切换最佳实践

Great question! Let's break this down to clean up that duplicate code and cover solid best practices for binary class toggles in jQuery.

Optimizing the Duplicate Code #

First, the root of your repetition is the redundant addClass/removeClass calls tied to separate condition checks. We can fix this by centralizing the mapping between your status classes (right/wrong) and Bootstrap's style classes (bg-success/bg-danger). Here's a cleaner approach:

class YourClass {
  constructor() {
    // Create a clear map of status classes to their corresponding Bootstrap styles
    this.statusToStyle = {
      right: 'bg-success',
      wrong: 'bg-danger'
    };
    
    // Bind your click handler (adjust the selector to match your divs)
    $('.clickable-div').on('click', (e) => this.handleDivClick(e));
  }

  handleDivClick(event) {
    const $target = $(event.target);
    
    // First, remove all possible style classes to avoid conflicts
    $target.removeClass(Object.values(this.statusToStyle).join(' '));
    
    // Loop through our map to find the matching status class and apply the style
    for (const [statusClass, styleClass] of Object.entries(this.statusToStyle)) {
      if ($target.hasClass(statusClass)) {
        $target.addClass(styleClass);
        break; // Exit early once we find a match for better performance
      }
    }
  }
}

This approach has two big wins:

• Maintainability: If you ever need to add a new status (like pending with bg-warning), you just update the statusToStyle map—no need to touch the logic.
• Cleanliness: No more repeating the same DOM manipulation code for each condition.

If you can guarantee each div only has one of the status classes, you can simplify even further:

handleDivClick(event) {
  const $target = $(event.target);
  // Find the first status class that exists in our map
  const matchingStatus = Object.keys(this.statusToStyle).find(cls => $target.hasClass(cls));
  // Get the corresponding style class
  const styleClass = this.statusToStyle[matchingStatus];
  
  // Update classes in one chain
  $target.removeClass(Object.values(this.statusToStyle).join(' '))
         .addClass(styleClass || '');
}

Best Practices for Binary Class Toggles in jQuery #

For "either/or" class switching scenarios like yours, here are some go-to practices:

1. Use toggleClass with Boolean Control

If you're toggling between two states (e.g., clicking to switch from right to wrong and vice versa), leverage toggleClass's second boolean parameter to precisely control which classes get added/removed:

$('.clickable-div').on('click', function() {
  const $this = $(this);
  const isRight = $this.hasClass('right');
  
  // Toggle status classes
  $this.toggleClass('right', !isRight).toggleClass('wrong', isRight);
  // Toggle corresponding Bootstrap styles
  $this.toggleClass('bg-success', !isRight).toggleClass('bg-danger', isRight);
});

2. Decouple with Data Attributes

Use HTML data-* attributes to link statuses to styles, so your JS doesn't hardcode class pairs:

<!-- Add data-style to your divs -->
<div class="right clickable-div" data-style="bg-success">...</div>
<div class="wrong clickable-div" data-style="bg-danger">...</div>

handleDivClick(event) {
  const $target = $(event.target);
  const targetStyle = $target.data('style');
  
  // Remove all possible styles, then add the target one
  $target.removeClass('bg-success bg-danger').addClass(targetStyle);
}

3. Cache jQuery Objects

Avoid re-querying the DOM multiple times for the same element. Cache the jQuery object (like we did with $target above) to boost performance, especially if you're handling frequent clicks.

4. Let CSS Do the Work When Possible

If you don't strictly need Bootstrap's utility classes, you can define styles directly tied to your status classes in CSS. This keeps style logic out of your JS:

.right { background-color: var(--bs-success); }
.wrong { background-color: var(--bs-danger); }

Now your JS only needs to manage the right/wrong classes, and CSS handles the visual styling—perfect separation of concerns.

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