Javascript 使用选中的输入动态更改自定义pc builder中的成本

首先,

我试图找出一种干净的方法，在选择任何项目时，使每个项目旁边的价格发生变化（在该组中，您可以想象在不同的部分将有图形卡等，它们也需要相同的功能）

如果是正数，我需要类为

。正数

，反之亦然，如果选择了项目

（+0）

，则不会显示价格差异

这也将用于复选框

---

实际上，这很简单，您只需计算所选价格与列表中所有选项的价格之间的差额。例如，类似这样的事情：

$(".calculation-item").each(function(index) {
    var my_cost = base_price + $(this).data("price");
    var difference = Math.round(my_cost - base_cost);
});

---

我已经在这里为您创建了一个工作JSFIDLE:。您需要执行小数舍入等操作，但这将使您走上正确的轨道：）

如果我的理解正确，您希望显示与以前选择的单选按钮和当前选择的单选按钮的成本差异

为此，您需要跟踪以前选择的按钮。我知道的唯一方法是在clickhandler范围之外设置一个变量来跟踪它并更新clickhandler中的元素

剩下的就相当简单了。我用一个例子更新了你的答案。相关代码如下：

在脚本顶部添加：

//global for last checked/selected radio
var lastSelection = $(".calculation-item:checked");
//clear existing price diffs set by markup
$('span.processor_price').text('');

增加了另一个功能：

function priceDifference(oldPrice, newPrice) {
    var difference = {
        'cssClass': '',
        'inCost': '0'
    };
    var fixedDiff = '';
    var diff = newPrice - oldPrice;
    diff = Math.ceil(Math.abs(diff * 100)) / 100;
    fixedDiff = diff.toString();
    if (newPrice < oldPrice) {
        difference.cssClass = 'negative';
        difference.inCost = '-' + fixedDiff;
    } else if (newPrice > oldPrice) {
        difference.cssClass = 'positive';
        difference.inCost = '+' + fixedDiff;
    }
    /* else {
    * must be the same, no reason for this block
    * as the default empty string will suffice
    * as will the cost difference of 0
    }*/
    return difference;
}

function CalculateDiffs(item) {
    var selectedPrice = +item.data("price");
    item.siblings(".item_price").text("");
    $(".calculation-item[name='"+item.attr("name")+"']").not(item).each(function(){
        var price = +$(this).data("price");
        var diff = (price-selectedPrice).toFixed(2);
        if (diff >= 0) {
            diff = "+"+diff;
        }
        $(this).siblings(".item_price").toggleClass("negative", diff < 0).text(diff);
    });
}

---

您需要将每个选定项目与具有相同名称的项目进行比较。在

CalculatePrice（）

中的

.each（）

循环中，将选中的项传递给此函数：

function priceDifference(oldPrice, newPrice) {
    var difference = {
        'cssClass': '',
        'inCost': '0'
    };
    var fixedDiff = '';
    var diff = newPrice - oldPrice;
    diff = Math.ceil(Math.abs(diff * 100)) / 100;
    fixedDiff = diff.toString();
    if (newPrice < oldPrice) {
        difference.cssClass = 'negative';
        difference.inCost = '-' + fixedDiff;
    } else if (newPrice > oldPrice) {
        difference.cssClass = 'positive';
        difference.inCost = '+' + fixedDiff;
    }
    /* else {
    * must be the same, no reason for this block
    * as the default empty string will suffice
    * as will the cost difference of 0
    }*/
    return difference;
}

function CalculateDiffs(item) {
    var selectedPrice = +item.data("price");
    item.siblings(".item_price").text("");
    $(".calculation-item[name='"+item.attr("name")+"']").not(item).each(function(){
        var price = +$(this).data("price");
        var diff = (price-selectedPrice).toFixed(2);
        if (diff >= 0) {
            diff = "+"+diff;
        }
        $(this).siblings(".item_price").toggleClass("negative", diff < 0).text(diff);
    });
}

或者，如果要将选中复选框的价格显示为负数，请使用以下选项：

$(".calculation-item:checkbox").each(function(){
    var diff = (this.checked ? "-" : "+") + $(this).data("price");
    $(this).siblings(".item_price").toggleClass("negative",this.checked).text(diff);
});