如何让多个按钮在同一页面上触发一个js功能

Question

如何在同一个if语句中使用2个不同的按钮呈现相同的产品购买模式？

我有一个页面，我只有一个产品，但有3个支付按钮（2个在一个案例中呈现，1个在另一个案例中使用if / else语句）。

if部分中的第一个按钮有效，而另一个按钮在else中工作，但第二个按钮在if中不起作用。

我尝试过使用.getElementsByClassName('purch-btn')并分别更改按钮类。

我也尝试使用.querySelectorAll('btn_buy, btn_buy_two')并为每个按钮分配其中一个ID。

这些都不奏效。

包视图：

<% if @pack.category_id == "sample-pack" %>

  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <button class="btn btn-success btn-block" id="btn_buy" type="button">Purchase This Library</button>
    </div>
  </div>

  <div class="col-md-12">
    <button class="btn btn-success btn-block top-drop" id="btn_buy_two" type="button">Purchase This Library</button>
  </div>

<% else %>

  <div class="col-md-8">
    <div class="wellington top-drop">
      <button class="packview-addcart btn btn-lg btn-success" id="btn_buy" type="button">Buy!</button>
    </div>
  </div>

<% end %>
<%= render 'purchase_modal' %>

购买模式：

<script>
  var handler = StripeCheckout.configure({
    key: '<%= Rails.configuration.stripe[:publishable_key] %>',
    token: function(token, arg) {
      document.getElementById("stripeToken").value = token.id;
      document.getElementById("stripeEmail").value = token.email;
      document.getElementById("chargeForm").submit();
    }
  });
  document.getElementById('btn-buy').addEventListener('click', function(e) {
    handler.open({
      zipCode: 'true',
      // image: '<%= @pack.art_link %>',
      name: '<%= @pack.title %>',
      description: 'Total: $<%= @pack.price %> USD',
      amount: document.getElementById("amount").value
    });
    e.preventDefault();
  });

  // Close Checkout on page navigation:
  window.addEventListener('popstate', function() {
    handler.close();
  });
</script>

Answer 1

像这样

document.querySelectorAll('#btn_buy, #btn_buy_two').forEach(function(btn) { btn.addEventListener('click', function(e) {
    handler.open(...[YOUR CODE]...);
    e.preventDefault();
  })
});

Answer 2

我最后只需要使用两个购买模式（每个按钮一个）。

在if声明中，我只是为<%= render 'purchase_modal_two' %>按钮添加了渲染id="btn_buy_two"，因为已经有一个用于第一个按钮（id="btn_buy"）之后它将加载else和if。

两种模态的唯一区别在于：

purchase_modal：

document.getElementById('btn_buy').addEventListener('click', function(e) {

purchase_modal_two：

document.getElementById('btn_buy_two').addEventListener('click', function(e) {

我仍然对这个问题的实际答案持开放态度，因为这是一种解决方法，并且很想知道是否有可能只用一个<script>部分来做到这一点！

Answer 3

一种解决方案可以使用document.querySelectorAll("#btn_buy, #btn_buy_two")此函数将返回一个包含您要查找的两个元素的数组。

由于你希望他们在点击它们时做同样的事情，你需要.forEach(function(button){})来迭代它们。

该功能将逐个返回按钮，并将它们存储在变量“按钮”中。

您现在可以对它们进行操作，因为它们是单个元素：

button.addEventListener('click', function(e) {
    handler.open({
        zipCode: 'true',
        // image: '<%= @pack.art_link %>',
        name: '<%= @pack.title %>',
        description: 'Total: $<%= @pack.price %> USD',
        amount: document.getElementById("amount").value
    });
    e.preventDefault();
});

我写了一个示例代码片段：

document.querySelectorAll('#btn1, #btn2').forEach(function(button) {
  button.addEventListener('click', function(e) {
    // ----- YOUR CODE -----
    console.log("some action")
  })
});

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

这两个按钮执行相同的操作，而不必写两次。

（我更改了代码，使其对具有相同问题的其他用户更容易访问）