JQuery, DRY. Ajax

Question

ile fonksiyonlara tıklayın. Bu kod DRY değil. Bu işlev bazı değişkenleri ve ajax isteklerini farklılaştırır, ancak bunlar çok benzerdir.

$(".increase-line-item").click(function(){ 
    var currentLineItem = $(this).parents("tr")[0]; 
    var lineItemQuantity = parseInt($(lineItemQuantityElement).text()); 
    // ... 
    $.ajax({ 
    url: "/line_items/increase_quantity?line_item=" + $(currentLineItem).attr("data-line-item-id"), 
    type: "POST", 
    success: function(result){ 
     $(lineItemQuantityElement).text(lineItemQuantity+1); 
     $(totalPriceElement).text(totalPrice); 
     console.log(result); 
    }) 
}); 

$(".decrease-line-item").click(function(){ 
    var currentLineItem = $(this).parents("tr")[0]; 
    var lineItemQuantity = parseInt($(lineItemQuantityElement).text()); 
    // ... 
    $.ajax({ 
    url: "/line_items/decrease_quantity?line_item=" + $(currentLineItem).attr("data-line-item-id"), 
    type: "POST", 
    success: function(result){ 
     if (lineItemQuantity > 1) { 
     $(lineItemQuantityElement).text(lineItemQuantity-1); 
     } 
     else{ 
     $(currentLineItem).fadeOut(200); 
     $(lineItemsCountElement).text(lineItemsCount - 1); 
     }; 
     $(totalPriceElement).text(totalPrice); 
     console.log(result); 
    } 
    }) 
}); 

Bunu en iyi şekilde yapmak istiyorum. Nasıl yapılır? Bana yardım et. Kodunuzu değişti

Answer 1

Düzenleme beri

tüm ajax şeyler için bir işlev yapın ve her iki düğme tıklama olayına bağlamak.() {$ `Gibi

function doAjaxStuff() { 
    var currentLineItem = $(this).parents("tr")[0]; 
    var lineItemQuantity = parseInt($(lineItemQuantityElement).text(), 10); 
    var action = $(this).hasClass('increase-line-item') ? 'increase_quantity' : 'decrease_quantity'; 

    // ... 

    $.ajax({ 
    url: "/line_items/" + action + "?line_item=[...]" 
    }) 
} 

$(".increase-line-item, .decrease-line-item").on('click', doAjaxStuff);