0

我有电子商务网站。我有产品页面，您可以在其中选择主要产品的不同变体和插件。我希望能够在客户点击选项时动态显示价格。

基本的 html 如下所示：

<div class="addons">
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="579" alt="7.00" class="options"> Bronze Left
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="580" alt="8.00" class="options"> Bronze Right
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="581" alt="9.00" class="options"> Chrome Left
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="582" alt="10.00" class="options"> Chrome Right  

    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="589" alt="18.00" class="options"> Brass Clarity
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="590" alt="20.00" class="options"> Zinc Abstract
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="591" alt="21.00" class="options"> Zinc Elegance
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="592" alt="23.00" class="options"> Zinc Prairie  
</div>

值属性用于添加到购物车功能，我无法更改，价格设置为 alt 但显然可以是任何东西，标题设置为 jQuery 点击目标。

我需要关于 jQuery 的帮助。我遇到的问题是我不知道如何让 var price 在点击功能之外相互叠加。

$("input[type='radio'][title='Handles']").click(function() {
    price = $(this).val();
}

$("input[type='radio'][title='Glass']").click(function() {
    price = $(this).val();
}
4

4 回答 4

1

如果我理解，您只想在alt中添加值。你可以这样做：

var total = 0;
$(".addons").find("input:checked").each(function() {
    total += parseFloat($(this).attr('alt'));
});

您将在点击处理程序中运行此代码，并更新显示总数的任何 HTML。

编辑“input:checked”比“input[checked=checked]”更干净。

于 2012-05-06T02:36:49.830 回答
1

您可以使用它input[type='radio']:checked来过滤和获取您正在寻找的元素。

var total = 0;

// Get all the input tags that are checked.
$(".addons").find("input[type='radio']:checked").each(function() {
    total += parseFloat($(this).attr('alt'));
});
于 2012-05-06T02:40:48.383 回答
0

如果我正确理解这一点，您希望将每个选定选项的价格相加。这是这样做的一种方法：

// An object to keep track of the total amount of each title
var total = {};

// Change event on the radio buttons
$('input[type=radio]').change(function() {
    // Assign the alt to the total object with the key name being the title
    total[$(this).attr('title')] = parseFloat($(this).attr('alt')).toFixed(2);

    // Output the result to HTML (optional)
    outputTotal();
});

function outputTotal()
{
    // Here all the prices are being summed
    var sum = 0;

    for(var index in total)
    {
        sum += total[index];
    }

    // And output to HTML
    $('.total').html(sum);
}

jsFiddle 示例

于 2012-05-06T02:46:16.020 回答
0 
var inputs = $(".addons input.options");
inputs.click(function() {
    var total = 0;
    $(".addons").find(":checked").each(function(){
       total += parseFloat($(this).attr("alt"));
    });
    $("#total").val(total);
});

http://jsfiddle.net/tive/fyZbV/

于 2012-05-06T03:14:02.277 回答