1

这是我的代码：HTML

<div>
    <p>Whatsit:<span class="price"></span></p>
    <p>Whosit: <span class="whositprice"></span></p>
    <p>Total Price: <span class="totalPrice"></span></p>
</div>
<div>
    <h4>Select a whatsit</h4>
    <input type="radio" name="whatsit" value="whatsit1" />Whatsit 1 - $10
    <input type="radio" name="whatsit" value="whatsit2" />Whatsit 2 - $22
<h4>Select a whosit</h4>
    <input type="radio" name="whosit" value="whosit1" />Whosit 1 - $7
    <input type="radio" name="whosit" value="whosit2" />Whosit 2 - $13

jQuery

function updateWhatPrice(){
    var whatsitChoice = $("input[name='whatsit']:checked").val();
    if(whatsitChoice == "whatsit1"){
        $("span.price").text("$10");
    }else if(whatsitChoice =="whatsit2"){
        $("span.price").text("$22");
    }
}
$("input[name='whatsit']").click(function(){
    updateWhatPrice();
});
function updateWhoPrice(){
    var whositChoice = $("input[name='whosit']:checked").val();
    if(whositChoice == "whosit1"){
        $("span.whositprice").text("$7");
    }else if(whositChoice =="whosit2"){
        $("span.whositprice").text("$13");
    }
}
$("input[name='whosit']").click(function(){
    updateWhoPrice();
});

我想要做的是根据单选按钮的选择更新 totalPrice 跨度。不知道从哪里开始。这是一个jsfiddle：http: //jsfiddle.net/Djd3d/

4

2 回答 2

1

您可以创建另一个返回总数的函数。

演示： //jsfiddle.net/Djd3d/1/

我在您的内部添加了 0 作为占位符<spans>并创建了以下代码：

function getTotal() {
    return (parseInt($(".price").text().split("$")[1]) + parseInt($(".whositprice").text().split("$")[1]));
}

并将其添加到您的更改事件中：

$("input[name='whosit']").click(function(){
    updateWhoPrice();
    $(".totalPrice").text("$" + getTotal());
});

$("input[name='whatsit']").click(function(){
    updateWhatPrice();
    $(".totalPrice").text("$" + getTotal());
});
于 2013-05-28T19:35:15.867 回答
1

我建议以下内容，这需要对您的 HTML 进行细微更改：

$('input[type="radio"]').change(function(){
    var self = this,
        price = self.nextSibling.nodeValue.match(/\$(\d+)/)[0];
    $('span.' + this.name + 'price').text(price);
    $('span.totalPrice').text(function(){
        return (parseInt($('span.whatsitprice').text().replace(/\$/,''),10) || 0) + (parseInt($('span.whositprice').text().replace(/\$/,''), 10) || 0);
    });
});

JS 小提琴演示。

更改的 HTML 是为了使span类名一致，遵循nameradio的模式input，加上price字符串。

编辑以解决OP 在评论（下方）中提出的问题：

如果其中一个选项的价格为 0 美元，你会怎么做。例如，Whatsit 1 不收取额外费用……但您想将其留空并且那里没有 0 美元……

如果 后面没有文本input，或者字符后面没有匹配的数字$：

$('input[type="radio"]').change(function(){
    var self = this,
        // caching the text of the nextSibling
        next = self.nextSibling.nodeValue,
        /* checking that there is a string of numbers following a $ character,
           if there is we return that sequence of numbers to the variable,
           if not we set the price to 0, to avoid NaN problems later.
        */
        price = next.match(/\$(\d+)/) ? next.match(/\$(\d+)/)[0] : 0;

    $('span.' + this.name + 'price').text(price);
    $('span.totalPrice').text(function(){
        return (parseInt($('span.whatsitprice').text().replace(/\$/,''),10) || 0) + (parseInt($('span.whositprice').text().replace(/\$/,''), 10) || 0);
    });
});

JS 小提琴演示。

参考：

于 2013-05-28T19:42:08.773 回答