防止同一个类的按钮被同时点击

如何解决防止同一个类的按钮被同时点击

我有两个按钮，它们具有相同的类名和相同的功能，但必须添加不同的输入，所以我使用 from django.contrib.auth.mixins import LoginrequiredMixin class CreateView(LoginrequiredMixin,CreateView): model = Post template_name = 'blog/post_form.html' fields = ['title','content'] def form_valid(self,form): form.instance.author = self.request.user return super().form_valid(form) 和 document.querySelectorAll() 方法来获取它们，但是现在当我单击一个时，另一个也会被点击。有没有办法在两个按钮都没有两个 forEach() 的情况下防止这种情况发生？让它一次只点击一个按钮。

我的代码：

addEventListener

解决方法

实际上并不是“点击”两个按钮。发生的事情如下：

您的 calculateBamboo() 函数循环遍历所有 inputElements：inputElements.forEach();并且您正在为所有输入执行逻辑。因此，无论您按下哪个按钮，calculateBamboo() 都会处理每个输入。

使用数据属性传递目标输入将帮助您确定哪个输入属于点击按钮

另外，@JerryBen 是对的，你不需要为每个按钮添加事件监听器，而是我们可以包裹一个元素中的所有按钮，向它添加事件监听器并识别哪个元素被点击。

const wrapper = document.getElementById('wrapper');
const pledgedAmount = document.querySelector('.backed-users');
const backersElement = document.querySelector('.number-of-backers');

wrapper.addEventListener('click',calculateBamboo);

let donationsMade = [];

function calculateBamboo(event) {
  /* Here you can access to the event argument,which contains target: the clicked element*/
  const el = event.target;

  if (el.nodeName !== 'BUTTON' || !el.classList.contains('submitBtn')) {
    return;
  }

  // Get target input from button's data-attr
  const targetInput = el.dataset.input;
  const inputElement = document.querySelector(`input[data-input="${targetInput}"]`);

  // Continue with the code you had...
  const inputValue = parseFloat(inputElement.value) || 0;

  if (inputValue < 25 || inputValue === '') return alert('Pledge must be at least $25.');

  donationsMade.push(inputValue);
  const donationsTotal = donationsMade.reduce((a,b) => a += b);
  pledgedAmount.textContent = `$${donationsTotal}`;
  backersElement.textContent = donationsMade.length;

  return donationsTotal;
}

<div class="backed">
  <h1 class="backed-users">0</h1>
</div>

<div class="backers">
  <h1 class="number-of-backers">0</h1>
</div>

<hr>

<div id="wrapper">
  <div class=".pledge-edition">
    <div class="pledge">
      <section class="pledgeTwo"></section>
      <div>
        <h2>Bamboo Stand</h2>
        <a href="#">Pledge $25 or more</a>
        <div>
          <h2>101</h2>
          <div>left</div>
        </div>
      </div>
    </div>

    <p>
      You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign,and you’ll be added to a special Backer member list.
    </p>

    <div class="pledge-amount">
      <p>Enter your pledge</p>
      <div>
        <input class="inputElement bambooInputElement" data-input="1" placeholder="$25" min="25" type="number">
        <button class="submitBtn bambooBtn" data-input="1">Continue</button>
      </div>
    </div>
  </div>

  <div class=".pledge-edition">
    <div class="pledge">
      <section class="pledgeThree"></section>
      <div>
        <h2>Black Edition Stand</h2>
        <a href="#">Pledge $75 or more</a>
        <div>
          <h2>64</h2>
          <div>left</div>
        </div>
      </div>
    </div>

    <p>
      You get a Black Special Edition computer stand and a personal thank you. You’ll be added to our Backer member list. Shipping is included.
    </p>

    <div class="pledge-amount">
      <p>Enter your pledge</p>
      <div>
        <input class="inputElement bambooInputElement" data-input="2" placeholder="$75" min="75" type="number">
        <button class="submitBtn blackEditionBtn" data-input="2" placeholder="$75" min="75">Continue</button>
      </div>
    </div>
  </div>
</div>

,

向每个按钮添加事件侦听器被认为是一种不好的做法。相反，使用单个事件侦听器来控制它们：

1. 将按钮包裹在一个 div 元素中
2. 仅将点击事件添加到 div 包装器
3. 将 event 对象作为参数传递给处理函数
4. 事件处理函数将使用 event.target 来识别点击了哪个特定按钮：

function calculateBamboo(evt){ const inputValue = parseFloat(evt.target.value) }

希望对你有帮助?

,

我目前的 JS

function calculateBamboo(target) {

    let inputElement = document.querySelector(`input[data-input="${target}"]`);
        donationsMade.push(inputElement);
        const donationsTotal = donationsMade.reduce((a,b) => a += b);
        backersElement.textContent = donationsMade.length;
        pledgedAmount.textContent = `$${donationsTotal}`;
        successElement.style.display = 'block';
        return donationsTotal;
}
submitBtn.forEach(button => {
    const target = button.dataset.input;
    button.addEventListener('click',calculateBamboo.bind(target));
})

HTML 按钮和输入

<!-- this is how my buttons are placed -->
<div id="wrapper">
<div class=".pledge-edition">
        <div class="pledge">
          <section class="pledgeTwo"></section>
          <div>
            <h2>Bamboo Stand</h2>
            <a href="#">Pledge $25 or more</a>
            <div>
              <h2>101</h2>
              <div>left</div>
            </div>
          </div>
        </div>

        <p>
          You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign,and
          you’ll be added to a special Backer member list.
        </p>

        <div class="pledge-amount">
          <p>Enter your pledge</p>
          <div>
            <input class="inputElement bambooInputElement" data-input="1" placeholder="$25" min="25" type="number">
            <button class="submitBtn bambooBtn" data-input="1">Continue</button>
          </div>
        </div>
      </div>

      <div class=".pledge-edition">
        <div class="pledge">
          <section class="pledgeThree"></section>
          <div>
            <h2>Black Edition Stand</h2>
            <a href="#">Pledge $75 or more</a>
            <div>
              <h2>64</h2>
              <div>left</div>
            </div>
          </div>
        </div>

        <p>
          You get a Black Special Edition computer stand and a personal thank you. You’ll be added to our Backer
          member list. Shipping is included.
        </p>

        <div class="pledge-amount">
          <p>Enter your pledge</p>
          <div>
            <input class="inputElement bambooInputElement" data-input="2" placeholder="$75" min="75" type="number">
            <button class="submitBtn blackEditionBtn" data-input="2" placeholder="$75" min="75">Continue</button>
          </div>
        </div>
      </div>

输入值时的 HTML

<div class="backed">
   <h1 class="backed-users">0</h1>
</div>

<div class="backers">
  <h1 class="number-of-backers">0</h1>
</div>