JQuery, trocken. Klicken Sie auf Funktionen mit AJAX

Question

Dieser Code ist nicht DRY. Diese Funktionen unterscheiden einige Variablen und Ajax-Anforderungen, aber sie sind sehr ähnlich.

$(".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); 
    } 
    }) 
}); 

Ich möchte es am besten machen. Wie es geht? Hilf mir.

Answer 1

bearbeiten, da Sie Ihren Code geändert

Machen Sie eine Funktion für alle Ihre Ajax-Sachen und binden Sie es an dem Click-Ereignis der beiden Tasten. Überprüfen Sie, welche Schaltfläche geklickt wurde und in Abhängigkeit von der Taste, bestimmen die Aktion: ("vergrößern-line-Artikel, .decrease-line-item")

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);