jQuery按钮检测异常：点击connect按钮始终弹出相同alert问题求助

Hey there! Let's dig into why your connect button keeps showing the same alert no matter which klein_auto/klein_anhaenger combo you select. Based on the problem description, the most common culprit is that your code isn't correctly grabbing the value of the actually selected buttons in each series—instead, it's pulling a fixed value every time.

First, let's break down the typical mistake #

Chances are your code looks something like this (a common error pattern):

<!-- Sample HTML structure (matches your button naming pattern) -->
<div class="auto-buttons">
  <button class="klein_auto" data-value="a1">klein_auto_1</button>
  <button class="klein_auto" data-value="a2">klein_auto_2</button>
</div>

<div class="anhaenger-buttons">
  <button class="klein_anhaenger" data-value="a3">klein_anhaenger_3</button>
  <button class="klein_anhaenger" data-value="a4">klein_anhaenger_4</button>
</div>

<button id="connect">Connect</button>

// ❌ Incorrect jQuery code that causes the same alert every time
$(document).ready(function() {
  let autoVal, anhaengerVal;

  $('.klein_auto').click(function() {
    $('.klein_auto').removeClass('active');
    $(this).addClass('active');
    // This is the problem! You're grabbing the first element's value, not the clicked one
    autoVal = $('.klein_auto').data('value');
  });

  $('.klein_anhaenger').click(function() {
    $('.klein_anhaenger').removeClass('active');
    $(this).addClass('active');
    // Same issue here—you're not targeting the selected button
    anhaengerVal = $('.klein_anhaenger').data('value');
  });

  $('#connect').click(function() {
    alert(`${autoVal}+${anhaengerVal}`);
  });
});

The mistake here is using the class selector ($('.klein_auto')) to fetch the value—it only returns the value of the first matching element in the DOM, not the one you actually clicked.

Fixed Solutions #

Here are two reliable ways to fix this:

Solution 1: Store the selected value when the button is clicked

This tracks the selected value immediately when a button is tapped, using $(this) to reference the clicked element:

$(document).ready(function() {
  let selectedAuto = '';
  let selectedAnhaenger = '';

  // Handle klein_auto selection
  $('.klein_auto').click(function() {
    $('.klein_auto').removeClass('active');
    $(this).addClass('active');
    // Grab the value of the button that was just clicked
    selectedAuto = $(this).data('value');
  });

  // Handle klein_anhaenger selection
  $('.klein_anhaenger').click(function() {
    $('.klein_anhaenger').removeClass('active');
    $(this).addClass('active');
    selectedAnhaenger = $(this).data('value');
  });

  // Connect button logic
  $('#connect').click(function() {
    // Add a check to ensure both options are selected
    if (selectedAuto && selectedAnhaenger) {
      alert(`${selectedAuto}+${selectedAnhaenger}`);
    } else {
      alert('Please select one option from both Auto and Anhaenger series!');
    }
  });
});

Solution 2: Fetch selected values when Connect is clicked

If you prefer not to store values upfront, you can look for the button with an active class (your selected state) when the Connect button is pressed:

$(document).ready(function() {
  // Toggle active state when buttons are clicked
  $('.klein_auto, .klein_anhaenger').click(function() {
    // Remove active state from siblings in the same group
    $(this).siblings().removeClass('active');
    $(this).toggleClass('active');
  });

  // Connect button logic
  $('#connect').click(function() {
    // Find the active buttons in each series
    const selectedAuto = $('.klein_auto.active').data('value');
    const selectedAnhaenger = $('.klein_anhaenger.active').data('value');

    if (selectedAuto && selectedAnhaenger) {
      alert(`${selectedAuto}+${selectedAnhaenger}`);
    } else {
      alert('Make sure you select one Auto and one Anhaenger!');
    }
  });
});

Key Takeaways #

• Always use $(this) to reference the element that was just clicked—this ensures you're getting the correct value for the selected button.
• Use an active class to visually and programmatically mark selected buttons; it makes it easy to find the chosen element later.
• Add validation to handle cases where the user clicks Connect without selecting both options.

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