如何为不同模态框分别获取data-email与data-id数据？

Hey there! Let's get that Profile button working with its own modal—here's what's going wrong and how to fix it:

The Core Issue #

Your current JavaScript selector targets all <a> tags inside .table .detail, so both the Email and Profile buttons are triggering the same email-focused modal logic. Adding a class name probably didn't work because you didn't separate the event handlers for each button type.

Solution 1: Add a Unique Class to the Profile Button #

This is the simplest approach—give your Profile button a distinct class, then write a separate click handler for it.

Step 1: Update Your HTML

Modify the Profile button to include a unique class (e.g., profile-btn):

<table class="table">
  <tr>
    <td class="detail">
      <a class="btn btn-default btn-xs" href="" data-email="<?php echo $us->email; ?>">Email</a>
      <!-- Add the `profile-btn` class here -->
      <a class="btn btn-default btn-xs profile-btn" href="" data-id="<?php echo $us->id; ?>">Profile</a>
    </td>
  </tr>
</table>

Step 2: Add a Separate JavaScript Handler

Write a new click event specifically for the Profile button, and point it to your second modal:

// Keep your existing Email button handler
$('.table .detail a:not(.profile-btn)').click(function(e) {
    e.preventDefault();
    var email = $(this).data('email');
    $.ajax({
        url: 'admin/send_email.php?token=<?php echo $token; ?>',
        data: {email: email},
        type: 'GET',
        dataType: 'HTML'
    }).done(function(resp) {
        $('#modalContent .modal-body').html(resp)
        $('#modalContent').modal('show');
    });
});

// New handler for the Profile button
$('.table .detail .profile-btn').click(function(e) {
    e.preventDefault();
    var userId = $(this).data('id');
    
    // Fetch profile data via AJAX
    $.ajax({
        url: 'admin/get_profile.php?token=<?php echo $token; ?>', // Replace with your profile endpoint
        data: {id: userId},
        type: 'GET',
        dataType: 'HTML'
    }).done(function(resp) {
        // Load content into your profile modal and show it
        $('#profileModal .modal-body').html(resp);
        $('#profileModal').modal('show');
    });
});

Step 3: Make Sure You Have a Profile Modal

Create a second modal for profile content (adjust the structure to match your design):

<div class="modal fade" id="profileModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">User Profile</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Profile content will load here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Solution 2: Use Data Attributes to Differentiate Buttons #

If you prefer not to add extra classes, use a data-action attribute to label each button's purpose, then branch your logic in a single handler:

Updated HTML

<table class="table">
  <tr>
    <td class="detail">
      <a class="btn btn-default btn-xs" href="" data-email="<?php echo $us->email; ?>" data-action="send-email">Email</a>
      <a class="btn btn-default btn-xs" href="" data-id="<?php echo $us->id; ?>" data-action="view-profile">Profile</a>
    </td>
  </tr>
</table>

Unified JavaScript Handler

$('.table .detail a').click(function(e) {
    e.preventDefault();
    const $button = $(this);
    const action = $button.data('action');

    if (action === 'send-email') {
        // Existing email modal logic
        const email = $button.data('email');
        $.ajax({
            url: 'admin/send_email.php?token=<?php echo $token; ?>',
            data: {email: email},
            type: 'GET',
            dataType: 'HTML'
        }).done(function(resp) {
            $('#modalContent .modal-body').html(resp)
            $('#modalContent').modal('show');
        });
    } else if (action === 'view-profile') {
        // Profile modal logic
        const userId = $button.data('id');
        $.ajax({
            url: 'admin/get_profile.php?token=<?php echo $token; ?>',
            data: {id: userId},
            type: 'GET',
            dataType: 'HTML'
        }).done(function(resp) {
            $('#profileModal .modal-body').html(resp);
            $('#profileModal').modal('show');
        });
    }
});

Either approach will work—pick whichever fits your code style better!

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