Как сделать так, чтобы несколько кнопок запускали одну функцию js на одной странице - PullRequest
Новая
       6

Как сделать так, чтобы несколько кнопок запускали одну функцию js на одной странице

0 голосов
/ 12 февраля 2019

Как я могу использовать 2 разные кнопки для визуализации одного и того же модального продукта в одном и том же операторе if?

У меня есть страница, на которой у меня есть только один продукт, но есть 3 кнопки оплаты (2 отображаются)в одном случае и 1 в другом с помощью оператора if / else).

Первая кнопка в разделе if работает, а другая - в другом, но вторая кнопка не работает в if.

Я попытался использовать .getElementsByClassName('purch-btn') и соответственно изменить классы кнопок.

Я также попытался использовать .querySelectorAll('btn_buy, btn_buy_two') и назначить один из этих идентификаторов каждой кнопке.

Ни одна из этих работ.

Представление пакета : 

<% 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>

Ответы [ 3 ]

0 голосов
/ 12 февраля 2019

В итоге мне просто пришлось использовать два модальности покупки (по одному для каждой кнопки).

В операторе 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> разделом!

0 голосов
/ 12 февраля 2019

Одно решение может использовать 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>

Две кнопки выполняют одно и то же действие без необходимости писать их дважды.

(Я изменил код, чтобы сделать его более доступным для другихпользователи, имеющие ту же проблему)

0 голосов
/ 12 февраля 2019

как это 

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