Как установить максимальное количество нажатий на кнопку заказа для каждого товара отдельно?(JavaScript) - PullRequest
Новая
       29

Как установить максимальное количество нажатий на кнопку заказа для каждого товара отдельно?(JavaScript)

0 голосов
/ 09 декабря 2018

Я пытаюсь реализовать функциональность, при которой пользователь может заказать только определенное количество раз (например, 5 раз), прежде чем появится предупреждение о том, что у продукта, который он пытается заказать, закончилсяна складе

Он все еще может, конечно, заказать другой продукт, на который не нажимали 5 раз.

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

Я пытался реализовать эту функцию, и этодействительно показывает предупреждение, но он принимает во внимание все нажатые кнопки заказа.

Вот так выглядят мои функции: 

let counter = 0; //global variable
function order_func() {
    let every_product= document.querySelectorAll(".all_prods");
    for (let each_prod = 0; each_prod < every_product.length; each_prod++) {
        every_product[each_prod].addEventListener("click", function (e) {
        if(count_stuff < 10){
                add_it(e, each_prod); //e to preventDefault() and console.log "each_prod"
            count_stuff++;
        }else{
            out_of_stock(e); //shows the alert it takes the event as argument to prevent default behavior.
        }

        });
    }

}

add_it() - это просто функция, которая console.log()продукт.

Я использую только vanilla JS, я не хочу использовать для этого другие библиотеки :) Спасибо!

1 Ответ

0 голосов
/ 09 декабря 2018

Вы можете использовать атрибут данных для хранения временных значений на странице.взгляните на этот пример с помощью JQuery. 

<!-- index.html -->
<a href="" id="order-btn" data-count="0" data-max-counts="5">Order</a>

<script>
$('#order-btn').click(function() {
    var maxCounts = this.data('maxCounts');
    var count = this.data('count');
    if (count >= maxCount) {
       alert('you cant order any more');
       return;
    }
    this.data('count',count++);

   // other logic .e.g Ajax call

})
</script>

вы можете сделать это с помощью vanilla JS также: 

<script>
    let counter = 0; //global variable
        function order_func() {
           let every_product= document.querySelectorAll(".all_prods");
           for (let each_prod = 0; each_prod < every_product.length; each_prod++) {
             every_product[each_prod].addEventListener("click", function (e) {
               var count_stuff = e.target.dataset.count; // or this.dataset.count
               var max_count = e.target.dataset.maxCounts; // or this.dataset.maxCounts
               if(count_stuff < max_count){
                  add_it(e, each_prod); 
                  e.target.dataset.count = count_stuff++;
               }else{
                 out_of_stock(e); 
               }

        });
    }

}
</script>
...