Question

我有两个标签，如下面的图片

在选择标签时，我想更改div的文本。如果我选择发票我想将信用卡费用的价值更改为0，如果我选择信用卡，它的价值应该还原。（在上图中它是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);
        }

    });
});

但是，当我点击第一张发票然后再点击信用卡后，它的价值不会变回原始文字。

由于我是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保存原始余额。

Answer 2

请data-type进行检查，因为当您点击并检查运营商时，active班级正在发生变化......

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

Answer 3

当您使用.text()时更新输入文本时，您将收到此问题，下次它将返回更新的文本。您可以使用originaltext将.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'));
        }

    });
});

使用jquery单击选项卡按钮上的div文本（并还原）

3 个答案: