基于条件修改WordPress中Gravity Forms视图卡片背景色

Got it, let's tweak your code to target the whole card instead of just the field element. Your current script adds the class to .gv-field-26-37, but we need to traverse up the DOM to find the parent card container and apply the class there.

Step 1: Adjust the JavaScript #

First, update your jQuery code to find the card parent (you'll need to replace .gravity-forms-card with the actual class/selector of your card element—inspect your HTML to find the right container):

$('.gv-field-26-37').each(function(){
  // Trim whitespace to avoid matching issues with extra spaces
  const fieldText = $(this).text().trim();
  
  if (fieldText === 'Offen') {
    // Traverse up to the closest card container and add the class
    $(this).closest('.gravity-forms-card').addClass('pay-invoice');
  }
});

Step 2: Add CSS for the Background Color #

Now add this CSS to your theme's stylesheet or custom CSS area to set the background color for the card:

.pay-invoice {
  background-color: #ffeeee; /* Replace with your desired background color */
}

Key Notes: #

• Find the right card selector: Use your browser's dev tools (right-click > Inspect) to look for the parent element that wraps the entire card. It might have a class like gv-entry-card, gf-card, or something specific to your theme.
• Trim whitespace: Adding .trim() ensures that if the field text has extra spaces (like line breaks or leading/trailing spaces), it still matches "Offen" correctly.
• Load timing: Make sure this script runs after the DOM is fully loaded. You can wrap it in $(document).ready() if it isn't already:

  $(document).ready(function() {
    // The code above goes here
  });
  

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