PHP内实现点击按钮弹出显示变量的提示框问题

Let's walk through fixing your code so each contact button shows the correct phone and email for the corresponding row. Here are the key issues in your original code and how to resolve them:

Key Issues in Your Original Code #

• Duplicate IDs: Using id='contact' inside a while loop creates multiple elements with the same ID, which is invalid HTML and breaks jQuery's selector functionality.
• Syntax Errors: The button tag wasn’t properly closed, and the onclick attribute had conflicting quote marks that broke the HTML.
• Incorrect HTML Structure: Closing </body> and </html> inside the loop produces invalid HTML—these tags should only appear once at the end of your page.
• PHP Variable Scope: The script outside the loop can’t access the $row variable anymore, so echoing $row['Phone'] directly in the alert won’t work for all rows.

Corrected Code #

Here’s the revised version of your code with all fixes applied:

PHP/HTML Part #

<?php
// Assume $result is your mysqli result set here
?>
<!DOCTYPE html>
<html>
<body>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<section class='content'>
  <div class='section group'>
    <div class='col span_1_of_3'>
      <div class='card'>
        <h2 class='name'><?= $row['Fname'] ?> <?= $row['Lname'] ?></h2>
        <section class='profile'>
          <h3>Interests:</h3> <?= $row['Interest1'] ?>, <?= $row['Interest2'] ?>, <?= $row['Interest3'] ?><br>
          <h3>Website:</h3> <?= $row['Website'] ?><br>
          <h3>Personal Statement:</h3>
          <aside class='statement'>
            <p><?= $row['PersonalStatement'] ?><br><br></p>
          </aside>
          <!-- Store contact info in data attributes, use a class instead of ID -->
          <button class='contact-details' 
                  data-phone="<?= htmlspecialchars($row['Phone']) ?>" 
                  data-email="<?= htmlspecialchars($row['Email']) ?>">
            Contact
          </button>
        </section>
      </div>
    </div>
  </div>
</section>
<?php endwhile; ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Listen for clicks on any contact button
  $(".contact-details").click(function(){
    // Pull contact info from the clicked button's data attributes
    const phone = $(this).data('phone');
    const email = $(this).data('email');
    // Show formatted contact info in an alert
    alert(`Phone: ${phone}\nEmail: ${email}`);
  });
});
</script>
</body>
</html>

Breakdown of Changes #

1. Cleaner Echo Syntax: Used <?= ?> (short echo tags) to simplify outputting PHP variables in HTML, replacing repetitive echo statements.
2. Data Attributes: Added data-phone and data-email to the button to store contact info directly with the element that triggers the dialog.
3. Class Instead of ID: Swapped id='contact' for class='contact-details' to avoid duplicate IDs and allow jQuery to target all buttons correctly.
4. Fixed HTML Structure: Moved closing </body> and </html> tags outside the loop so they only appear once at the end of the page.
5. Improved jQuery Handling: The click handler now retrieves data from the specific button clicked, ensuring each button shows the correct contact info for its row.

Bonus: Custom Modal (Better Than Alert) #

For a more polished experience, replace the alert with a custom modal. Add this HTML right before </body>:

<div id="contact-modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px; border:1px solid #ccc; z-index:1000;">
  <h3>Contact Details</h3>
  <p><strong>Phone:</strong> <span id="modal-phone"></span></p>
  <p><strong>Email:</strong> <span id="modal-email"></span></p>
  <button id="close-modal">Close</button>
</div>
<div id="modal-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;"></div>

Update the jQuery script to use the modal:

$(document).ready(function(){
  $(".contact-details").click(function(){
    const phone = $(this).data('phone');
    const email = $(this).data('email');
    // Populate modal with contact info
    $("#modal-phone").text(phone);
    $("#modal-email").text(email);
    // Show modal and overlay
    $("#contact-modal, #modal-overlay").show();
  });
  
  // Close modal when clicking close button or overlay
  $("#close-modal, #modal-overlay").click(function(){
    $("#contact-modal, #modal-overlay").hide();
  });
});

This gives you a customizable, user-friendly dialog instead of the default alert box.

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