Как перевести jquery код на чистый javascript?

Question

$(document).ready(function(){
    $(".add-to-cart").click(function () {
        var id = $(this).attr("data-id");
        $.post("/cart/addAjax/"+id, {}, function (data) {
            $("#cart-count").html(data);
        });
        return false;
    });
});

 <a style="margin-top: 55px" href="#" data-id="<?php echo $product['id'];?>"
   class="btn btn-default add-to-cart">
   <i class="fa fa-shopping-cart"></i>В корзину
    </a>

У меня есть кнопка "в корзину" с data-id, класом add-to-cart

Answer 1

Скорее всего как-то так:

// Это вместо $(document).ready(function()........
document.addEventListener('DOMContentLoaded', onDOMContentLoaded)

const onDOMContentLoaded = () => {
    // Это вместо $(".add-to-cart").click......
    document.querySelectorAll(".add-to-cart").forEach(el => 
        el.addEventListener("click", () => {          
            let id = el.dataset.id;
            // Это вместо   $.post>...  
            fetch(`/cart/addAjax/${id}`, {
                method: 'POST', 
                body: {}, 
                headers: {
                  'Content-Type': 'application/json'
                }
            })
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                // Это вместо $("#cart-count").html(data);
                document.getElementById('cart-count').innerHTML = data;
            });                        
        })
    );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<a style="margin-top: 55px" href="#" data-id="7" class="btn btn-default add-to-cart">
  <i class="fa fa-shopping-cart"></i>В корзину
</a>
<div id="cart-count"></div>

БЛОГ НА HUSL

Как перевести jquery код на чистый javascript?

Ответы (1 шт):