ändern div Text (und wieder zurück) auf Klick Tab-Taste mit Jquery

Question

Ich habe zwei Laschen wie unten Bild

Bei der Auswahl der Registerkarte i den Text eines div ändern möchten. Wenn ich Rechnung auswählen möge i Wert von Kreditkartengebühr auf 0 ändern, und wenn ich Kreditkarte wählen sollte es Wert wieder zurück. (In der oberen Bild, ist es $ 17,00)

Hier ist mein HTML-Code ist

<ul class="nav nav-tabs payment-method-list" style="list-style-type: none;">  
    <li class="active" style="list-style-type: none;"> 
     <a data-target="#payment-method-selector-creditcard" data-toggle="tab" data-type="creditcard" href="#"> 
      Credit/Debit Card 
     </a> 
    </li> 
    <li class="" style="list-style-type: none;"> 
     <a data-target="#payment-method-selector-invoice" data-toggle="tab" data-type="invoice" href="#"> 
      Invoice 
     </a> 
    </li> 
</ul> 
<p> 

Kreditkartengebühr Code

<span class="pull-right cart-summary-handling-cost-formatted" id="service_charge">$17.00</span>  //it's value will be dynamic   
<span>Credit Card Fee </span> 

Hier ist meine jQuery-Code

jQuery(document).ready(function() { 
    jQuery(".payment-method-list li a").click(function() { 
     var originaltext = jQuery("#service_charge").text(); 
     if (jQuery('a[data-target="#payment-method-selector-invoice "]').parent().hasClass('active')) { 
      jQuery("#service_charge").text("0"); 
     } else { 
      jQuery("#service_charge").text(originaltext); 
     } 

    }); 
}); 

Aber es ist changin g Wert auf 0, wenn ich zuerst auf die Rechnung und dann auf die Kreditkarte klicke, danach wird der Wert nicht auf den ursprünglichen Text zurückgesetzt.

Da ich neu bei jquery bin, bitte helfen Sie mir, was mit diesem Code falsch ist.

Answer 1

Sie erhalten das Problem, sobald der Text bei der Eingabe aktualisiert wird, wenn .text() verwendet wird, beim nächsten Mal wird der aktualisierte Text zurückgegeben. Sie können den originaltext im internen Datencache mit .data() persistieren, der bei Bedarf abgerufen werden kann.

jQuery(document).ready(function() {  
    //Persists originaltext 
    var serviceChange = jQuery("#service_charge");  
    var originaltext = serviceChange.text(); 
    serviceChange.data('originaltext', originaltext); 

    //Populate it using the method 
    //serviceChange.data('originaltext', getOriginalText());  

    jQuery(".payment-method-list li a").click(function() {    
     if (jQuery('a[data-target="#payment-method-selector-invoice "]').parent().hasClass('active')) { 
      serviceChange.text("0"); 
     } else { 
      serviceChange.text(serviceChange.data('originaltext')); 
     } 

    }); 
}); 

Answer 2

jQuery(document).ready(function() { 
    jQuery(".payment-method-list li a").click(function() { 
     localStorage.setItem("originalBalance", jQuery("#service_charge").text()); 
     if (jQuery('a[data-target="#payment-method-selector-invoice "]').parent().hasClass('active')) { 
      jQuery("#service_charge").text("0"); 
     } else { 
      jQuery("#service_charge").text(localStorage.getItem("originalBalance")); 
     } 
    }); 
}); 

bereits. Ich spare das ursprüngliche Guthaben durch localStorage.

Answer 3

Try Prüfung durch data-type, weil Ihre active Klasse zu ändern, wenn Sie Ihren Operator angeklickt und Überprüfung ...

jQuery(document).ready(function() 
{ 
    var originaltext= jQuery("#service_charge").text();  
    jQuery(".payment-method-list li a").click(function(){  
    if(jQuery(this).data("type") == "invoice") 
     { 
     jQuery("#service_charge").text("0"); 
    } 
    else { 
     jQuery("#service_charge").text(originaltext); 
    } 
    }); 
});