使用jQuery修改CSS遇问题：两步式结账模态框开发求助

Hey there! Let's get that two-step checkout modal working smoothly. Based on your setup, here's a straightforward solution to fix the jQuery CSS switching problem, plus common pitfalls to check:

First, Double-Check the Basics #

• Make sure jQuery is loaded before your custom script—this is the #1 cause of "jQuery not defined" errors. Add it in your <head> or right before the closing </body> tag:

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• Verify your element IDs are spelled correctly (no typos in step1, step2, or button IDs!).

Working Step Switch Functions #

Replace your existing check_address() and back_address() functions with these—they use jQuery's built-in show()/hide() methods (cleaner than directly modifying display via .css()):

function check_address() {
  // Optional: Add address validation logic here first
  // Example: if ($('#address-input').val() === '') { alert('Please enter your address'); return; }

  // Switch to step 2
  $('#step1').hide();
  $('#step2').show();
  
  // Toggle button visibility
  $('#next_button').hide();
  $('#back_button').show();
}

function back_address() {
  // Switch back to step 1
  $('#step2').hide();
  $('#step1').show();
  
  // Toggle button visibility
  $('#back_button').hide();
  $('#next_button').show();
}

Update Your Button HTML #

Ensure your Back button starts hidden (since step 2 isn't visible initially):

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="check_address();" id="next_button">Next >></button>
<button type="button" class="btn btn-primary" onclick="back_address();" id="back_button" style="display:none"><< Back</button>

Troubleshooting Tips #

• Open your browser's developer tools (F12) and check the Console tab for errors—this will tell you if jQuery is missing, or if a selector isn't finding an element.
• Wrap your functions in a DOM ready handler if they're defined before the elements exist:

  $(document).ready(function() {
    window.check_address = function() {
      // ... function code here ...
    };
    window.back_address = function() {
      // ... function code here ...
    };
  });
  

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