点击按钮时定位多个类名，获取.btn1点击后的按钮值存入数据库

Hey there! Let's work through this problem together. When you click your .btn1 button, you need to collect values from multiple related buttons to send to your database— the main challenge here is targeting those related buttons accurately. Here are a few practical approaches based on different HTML structure scenarios:

Approach 1: Target Buttons in the Same Parent Container #

If your .btn1 and the buttons you need values from are wrapped in a shared parent element, use DOM traversal to scope your selection (this prevents grabbing unrelated buttons elsewhere on the page).

Example HTML: #

<div class="button-set">
  <button class="data-btn" data-value="user_123">User A</button>
  <button class="data-btn" data-value="user_456">User B</button>
  <button class="btn1">Upload Selected Values</button>
</div>

JavaScript Solution: #

// Bind click event to all .btn1 buttons (in case you have multiple sets)
document.querySelectorAll('.btn1').forEach(triggerBtn => {
  triggerBtn.addEventListener('click', function() {
    // Find the closest parent container shared with target buttons
    const parentContainer = this.closest('.button-set');
    
    // Get all target buttons within that container
    const targetButtons = parentContainer.querySelectorAll('.data-btn');
    
    // Collect values (using data-value attributes for reliable, structured data)
    const collectedValues = Array.from(targetButtons).map(btn => btn.dataset.value);
    
    // Now you can send collectedValues to your database
    console.log('Values to upload:', collectedValues);
    // Example upload logic (replace with your actual endpoint)
    // fetch('/api/save-values', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ values: collectedValues })
    // });
  });
});

Approach 2: Use Custom Data Attributes for Grouping #

If your .btn1 and target buttons aren't in the same parent, use custom data-* attributes to group related elements together. This is super flexible for scattered button sets.

Example HTML: #

<button class="data-btn" data-group="team-alpha" data-value="member_789">Member 1</button>
<button class="data-btn" data-group="team-alpha" data-value="member_012">Member 2</button>
<button class="btn1" data-group="team-alpha">Upload Team Alpha</button>

<button class="data-btn" data-group="team-bravo" data-value="member_345">Member 3</button>
<button class="btn1" data-group="team-bravo">Upload Team Bravo</button>

JavaScript Solution: #

document.querySelectorAll('.btn1').forEach(triggerBtn => {
  triggerBtn.addEventListener('click', function() {
    // Get the group ID from the clicked .btn1
    const groupId = this.dataset.group;
    
    // Select all target buttons belonging to the same group
    const targetButtons = document.querySelectorAll(`.data-btn[data-group="${groupId}"]`);
    
    // Collect values
    const collectedValues = Array.from(targetButtons).map(btn => btn.dataset.value);
    
    console.log(`Values for group ${groupId}:`, collectedValues);
    // Add your database upload logic here
  });
});

Key Notes to Avoid Mistakes #

• Use data-* attributes for values: Avoid relying on button text (innerText) for data— text can change for UI purposes, but data-* attributes stay consistent.
• Scope your selectors: Never use global selectors like document.querySelectorAll('.data-btn') without filtering (via parent or group attributes), or you'll collect values from every matching button on the page.
• Handle multiple .btn1 instances: Using querySelectorAll and looping through each .btn1 ensures your code works if you have multiple button sets on the same page.

内容的提问来源于stack exchange，提问作者Onovo Arinzechukwu George