Javascript 更改选项卡按钮上的div文本（并恢复），使用jquery单击

我有两个标签，如下图所示

在选择选项卡时，我想更改div的文本。如果我选择invoice，我想将信用卡费用的值更改为0，如果我选择credit card，它的值应该恢复。（上图中为$17.00）

这是我的html代码

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

但当我单击第一张发票然后单击信用卡时，它的值变为0，之后它的值不会变回原始文本

---

由于我是jquery新手，请帮助我这段代码有什么问题。

当使用

.text（）

时，一旦输入上的文本被更新，那么下次它将返回更新的文本。您可以使用

.data（）

将

原始文本

持久保存在内部数据缓存中，必要时可以获取

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

    });
});

---

当使用

.text（）

时，一旦输入上的文本被更新，您就会遇到问题，下一次它将返回更新的文本。您可以使用

.data（）

将

原始文本

持久保存在内部数据缓存中，必要时可以获取

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

    });
});

试试这个。我正在通过localStorage保存原始余额

---

试试这个。我正在通过localStorage保存原始余额。

请尝试按

数据类型检查，因为当您单击并检查操作员时，
活动的
类正在更改

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

请尝试按
数据类型检查，因为当您单击并检查运算符时，
活动的
类正在更改

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

输入的
服务费
是如何填充的？它的值是动态的。使用函数生成其值。如何填充输入的
服务费
？其值是动态的。使用一个函数来生成它的值。工作正常…有一个问题，这个代码在页面加载时不点击选项卡就可以运行吗？我没有点击就试过了，但效果不太好…一个问题是，在页面加载时，如果不点击tab，这段代码能运行吗？我没有点击就试过了，但不起作用
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);
    }
    });
 });