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

Posted 2023-05-09

【中文标题】无法使用多个复选框更新值？

【英文标题】：Can't update values with multiple checkboxes?

【发布时间】：2016-04-25 06:22:06

【问题描述】：

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

我有设置它的想法，甚至有一个 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。

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

【参考方案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>

【讨论】：

这很奇怪.. 我把它们放到实时站点中并且它没有缓存（我认为），然后复制 html 带来的非缓存文本。会更新，然后重新评论。过几天回来。

更新：我修复了 jsfiddle 上的缓存类，但似乎仍然没有看到它在 livesite 上发生

我输入了 $('input[name="pricing-radios"]').on('change', function() ... );进入 Chrome 控制台，它可以在实时页面上运行。不过，您是对的，它在加载的实时页面上不起作用。代码本身是正确的。我的假设是页面上的其他 javascript 正在阻止调用此代码。尝试两件事 1) 将包含 SalsaMain2016.min.js 的脚本标签移动到页面底部。这行得通吗？ 2）删除所有的js文件（jquery库除外），看看是否有效。然后把js文件一个一个加回来，隔离问题。

好吧，我清除了 salsamain.js 文件，并且只有该代码，但仍然无法正常工作。但是，通过控制台加载它是正确的。目前正在寻找一种将其编写为 OnLoad 函数的方法。

再次查看您的代码，我意识到您的代码实际上在两个 document.readys 中。在 $(function()... ) 中，您有一个 $(document).ready(function()...);在 $(document).ready 你有 $('input[name="pricing-radios"]').on('change', function() ... ) 代码。在 Jquery 中，$(function()... ) 等价于 $(document).ready(function()...)，因此您基本上将代码放在两个 (document).readys 中。删除不必要的内部 $(document).ready(function() 看看是否有效。