无法使用多个复选框更新值？

Question

我正在尝试创建用户选择的定价体验，其中单击复选框（以选择列表大小）将更改定价图表的某些数字。

我有设置它的想法，甚至有一个 extremely simplified version 工作。

$('input[name="optionsRadios"]').on('change', function(){
    if ($(this).val()=='small') {
        //change to "show update"
         $(".change1").text("green");
         $(".change2").text("yellow");
    } else if ($(this).val()=='med') {
        $(".change1").text("pink");
        $(".change2").text("white");
    } else if ($(this).val()=='large') {
        $(".change1").text("red");
        $(".change2").text("blue");
    } 
});

但是当我将它移到我的 live site 时，它似乎不想执行脚本。它也不会抛出任何特定于我的脚本的错误。

这里是完整版的JS：

/* Auto Pricing Updater */
$('input[name="pricing-radios"]').on('change', function(){
    if ($(this).val()=='pricing1') {
        //change to "show update"
         $(".pricing-engage-chng").text("179");
         $(".pricing-engage-chng-additional").text(".01");
         $(".pricing-crm-chng").text("214");
         $(".pricing-crm-chng-additional").text(".01");
         $(".upgrade-price").text(".0025");
    } else if ($(this).val()=='pricing2') { 
         $(".pricing-engage-chng").text("699");
         $(".pricing-engage-chng-additional").text(".005");
         $(".pricing-crm-chng").text("714");
         $(".pricing-crm-chng-additional").text(".006");
         $(".upgrade-price").text(".002");
    } else if ($(this).val()=='pricing3') {
         $(".pricing-engage-chng").text("3,499");
         $(".pricing-engage-chng-additional").text(".0025");
         $(".pricing-crm-chng").text("3,514");
         $(".pricing-crm-chng-additional").text(".00325");
         $(".upgrade-price").text(".00075");
    } 
});

为了拥有它，一个simplified JS fiddle of the live site。

非常感谢您对解决此问题的任何帮助！

Answer 1

您没有收到错误，因为您的 Javascript/JQuery 代码没有任何错误。

看看你的小提琴，你试图改变的元素没有用你的 JQuery 代码中引用的类来标记。

没有包含pricing-engage-chng、pricing-engage-chng-additional、pricing-crm-chng、pricing-crm-chng-additional或upgrade-price类的元素（至少在小提琴中） .

当您执行$(".pricing-engage-chng") 时，您将选择所有具有pricing-engage-chng 类的元素。例如，如果您想选择当前标记为 <span class="pricing-number">79</span> 的元素，则需要像这样添加 price-engage-chng 类：<span class="pricing-number pricing-engage-chng">79</span>