Question

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

我有一个页面，其中我只有一种产品，但是有3个付款按钮（在两种情况下使用if / else语句呈现2个，在另一种情况下呈现1个）

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 ”中。

您现在可以对它们进行操作，因为它们只是一个要素：

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>

这两个按钮执行相同的操作，而无需两次编写。

（我更改了代码，以使其他具有相同问题的用户也可以访问它）

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

3 个答案: