如何在WordPress中用jQuery实现Div互显隐？现有代码失效求助

Let's break down why your current code isn't working and fix it step by step:

1. Critical jQuery Structure Error #

Your conditional check is outside the document.ready wrapper, which means it runs before the DOM is fully loaded. At that point, jQuery can't find .b-car-info__price or #autoverkocht elements, so the logic never triggers correctly. Also, you set both display: none and visibility: hidden initially—if you only toggle visibility later, display: none will still keep the element hidden.

Fixed jQuery Code (autoverkocht.js) #

jQuery(document).ready(function($){
    // Default state: hide the element completely
    $("#autoverkocht").hide();

    // Check if price element is hidden, then show autoverkocht
    if($('.b-car-info__price').is(":hidden")){
        $('#autoverkocht').show();
    }

    // Optional: Add a listener if the price might hide/show dynamically after page load
    $(document).on('change', '.b-car-info__price', function(){
        if($(this).is(":hidden")){
            $('#autoverkocht').show();
        } else {
            $('#autoverkocht').hide();
        }
    });
});

• Used .hide() and .show() for simplicity (they handle both display and visibility correctly)
• Wrapped all logic inside document.ready to ensure DOM is loaded
• Added an optional dynamic listener in case the price element's visibility changes after page load (e.g., via other scripts)

2. Script Loading Potential Issues #

Your functions.php code has a few possible pitfalls:

• If you're using a child theme, get_template_directory_uri() points to the parent theme's folder. Use get_stylesheet_directory_uri() instead to target your child theme's js folder.
• Always version your scripts to avoid browser caching issues.
• Make sure the js/autoverkocht.js file actually exists in the correct directory.

Fixed functions.php Code #

add_action( 'wp_enqueue_scripts', 'add_my_script' ); 
function add_my_script() { 
    wp_enqueue_script( 
        'autoverkocht-script', 
        get_stylesheet_directory_uri() . '/js/autoverkocht.js', 
        array('jquery'), 
        '1.0', // Version number (update this when you edit the script)
        true // Load script in footer (better for performance and DOM readiness)
    ); 
}

• Renamed the script handle for clarity
• Switched to get_stylesheet_directory_uri() (works for both parent and child themes)
• Added a version number to bust cache
• Set true to load the script in the footer (reduces chances of DOM not being ready when script runs)

3. Optional: CSS Fallback for Initial State #

To prevent the #autoverkocht element from flashing before your JS loads, add this CSS to your theme's stylesheet:

#autoverkocht {
    display: none;
}

This way, the element is hidden by default, and JS only shows it when needed.

4. Debugging Steps to Verify #

• Check your browser's developer tools (Console tab) for any JS errors (e.g., "element not found" or "jQuery is not defined")
• Verify the script is loading correctly: Go to the Network tab in dev tools, filter by JS, and check if autoverkocht.js appears with a 200 status code
• Confirm the .b-car-info__price element is actually being hidden (check its computed styles in the Elements tab)

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