javascript - 使用 jquery 在选项卡按钮上更改 div 文本(并还原)

Question

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

在选择选项卡时，我想更改 div 的文本。如果我选择发票，我想将信用卡费用的值(value)更改为 0，如果我选择信用卡，它的值(value)应该恢复。(在上图中它是 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>

信用卡手续费代码

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

这是我的 jquery 代码

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

    });
});

但是当我点击第一个发票然后点击信用卡时它的值变为 0，之后它的值没有变回原始文本。

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

Answer 1

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

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