我正在尝试使用多个选项来完成用于RV的构建和定价的脚本。 我已经对代码进行了尝试,但是我无法获得“总价”来进行计算或“图像切换”来进行工作。

在“总计”脚本上,我需要对其进行更改,使其起始价格为39,950.00。 不确定如何调整。 我在这里得到了这个脚本: http : //jsfiddle.net/b3p4r/

在“图像切换”脚本上,我不确定自己在做什么错。 我在这里得到了脚本,但是该脚本没有复选框...所以我不确定在这里有什么问题。 根据两个输入单选按钮显示图像

影像开关说明...

我对这个脚本的想法是所有图像都经过格式化,因此无论是否选择了一个选项,开关都将构建图像URL。

我认为它应该如何工作...以下值需要确定。

graphicsValue-构建图像的第一部分。 如果需要,这里有一个默认值。 这是一台收音机,因此将被选中。

awningValue-构建图像URL的下一部分。 如果需要,这里有一个默认值。 这是一台收音机,因此将被选中。

kingValue-构建图像URL的第三部分...如果未选中,则此部分将没有任何值

solarValue-构建图像URL的第四部分...如果未选中,则此部分将没有值

genbaskValue-构建图像URL的最后一部分,包括.jpg扩展名。 如果未选中,则仅返回.jpg以完成整个图像URL

因此,如果选择了图形样式3(gr-3)则选择了 灰色遮阳篷(遮阳灰)选中了King-Dome(选择国王)未选中Solar(选择了太阳能) ,并且选中了Generator Basket (选择了- genbask) ...当您切换这些选择中的每一个时,它将实时返回这些值,图像将切换。

在上面的示例中,返回的URL为

/ images / build / Red / RB + GA + KD +(无)+ BA.jpg等于= /images/build/Red/RBGAKD.jpg (这是显示的图像。或者至少这就是我的方式希望它能工作...但不是。)

  <script type='text/javascript'> // Script for image swap
  $("input:radio[name='graphics'], input:radio[name='awning'], input:checkbox[name='opt-king'], input:checkbox[name='opt-solar'], input:checkbox[name=opt-'genbask']").click(function() { // This handler runs when any of the radio buttons are clicked.
      var graphicsValue = $("input:radio[name='graphics']:checked").id(); // Find which graphics radio button is checked.
      var awningValue = $("input:radio[name='awning']:checked").id(); // Find which awning radio button is checked.
      var kingValue = $("input:checkbox[name='opt-king']:checked").id(); // Find if opt-king checkbox button is checked.
      var solarValue = $("input:checkbox[name='opt-solar']:checked").id(); // Find if opt-solar checkbox button is checked.
      var genbaskValue = $("input:checkbox[name='opt-genbask']:checked").id(); // Find if opt-genbask checkbox button is checked.

      var image_name = ""; // Initialize the image name to blank. We will be appending as we go.

      switch (graphicsValue) {
          case 'gr-1':
              image_name += "/images/build/Black/BL"; // Graphic Style 1 was selected, so use that value for the first part of the image.
              break;
          case 'gr-2':
              image_name += "/images/build/Black2/BL"; // Graphic Style 2 was selected, so use that value for the first part of the image.
              break;
          case 'gr-3':
              image_name += "/images/build/Red/RB"; // Graphic Style 3 was selected, so use that value for the first part of the image.
              break;
          case 'gr-4':
              image_name += "/images/build/Red/RB"; // Graphic Style 4 was selected, so use that value for the first part of the image.
              break;
           case 'gr-5':
              image_name += "/images/build/Blue/BU"; // Graphic Style 5 was selected, so use that value for the first part of the image.
              break;
          case 'gr-6':
              image_name += "/images/build/Blue/BU"; // Graphic Style 6 was selected, so use that value for the first part of the image.
              break;
           case 'gr-7':
              image_name += "/images/build/Pinstripe/Pin"; // Graphic Style 7 was selected, so use that value for the first part of the image.
              break;
          case 'gr-8':
              image_name += "/images/build/Pinstripe/Pin"; // Graphic Style 1 was selected, so use that value for the first part of the image.
              break;
          default:
              image_name += "/images/build/Black/BL"; // Make sure there is a default value, or a broken image could occur!
              break;
      }

      switch (awningValue) {
          case 'awn-gray':
              image_name += "GA"; // Gray Awning was selected, so use that value for the second part of the image.
              break;
          case 'awn-blue':
              image_name += "BA"; // Blue Awning was selected, so use that value for the second part of the image.
              break;
          default:
              image_name += "BA"; // Make sure there is a default value, or a broken image could occur!
              break;
      }

       switch (kingValue) {
          case 'opt-king':
              image_name += "KD"; // King-Dome was selected, so use that value for the third part of the image.
              break;

          default:
              image_name += ""; // The default value for the checkbox in default state of not being checked. 
              break;
      }

       switch (solarValue) {
          case 'opt-solar':
              image_name += "SO"; // Solar was selected, so use that value for the fourth part of the image.
              break;

          default:
              image_name += ""; // The default value for the checkbox in default state of not being checked.
              break;
      }

       switch (genbaskValue) {
          case 'opt-genbask':
              image_name += "BA.jpg"; // Generator Basket was selected, so use that value for the last part of the image.
              break;

          default:
              image_name += ".jpg"; // The default value for the checkbox in default state of not being checked. This adds .jpg to complete image if Generator Basket is not checked.
              break;
      }

      $('#show_image_text').text(image_name); // Put the image URL
      $('#Show_image').attr('src', image_name); // Put the image value in the formula image field src.
  });
  </script>

下一个脚本是用来格式化总价的脚本。 如果要将其显示为输入,则可以使其正常工作,但希望将其显示在div中。 我还需要弄清楚如何在此处添加起价。

                       <script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
   {num = "0";}
  sign = (num == (num = Math.abs(num)));
  num = num.toFixed(2);
  elements= num.split(".");
  num = elements[0];
  cents = elements[1];
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  {num = num.substring(0,num.length-(4*i+3))+','+
   num.substring(num.length-(4*0+3));}
  return (((sign)?'':'-') + '$' + num + '.' + cents)
}

$("input").change(function() {
    var total = 0;
    $("input").each(function() {
        if($(this).is(":checked"))
            total += parseFloat($(this).val());
    });
    $("#total").val(formatCurrency(total));
});
}//]]>  

</script>


  </head>

这是我正在使用的HTML ...

  <body>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <div style="background: #efefef; width: 600px; padding: 10px;">
  <h3>Image Will be shown in this div</h3>
  <img id="show_image" />
  <img id="show_image_text" />
  </div>

  <div><h2 style=" text-align: left; color: #c84e1e !important;"><span style="font-size:20px; color: #222;">MSRP:</span> $<span id="total">39950.00</span></h2></div>



  <form name="build">
  <h2>Floor Plans</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="floorplan" style="margin-top:-3px;" id="fp-stand" value="0.00" > Standard Floor Plan</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="floorplan" style="margin-top:-3px;" id="fp-tb" value="0.00" > Twin Bed Floor Plan</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <h2>Graphics</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-1" value="0.00" > Black/Gray Style 1</div> 
  </div> 
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-2" value="0.00"> Black/Gray Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-3" value="0.00"> Red/Blue Style 1</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-4" value="0.00"> Red/Blue Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-5" value="0.00"> Dark Blue/Light Blue Style 1</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-6" value="0.00"> Dark Blue/Light Blue Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-7" value="0.00"> Pinstripe Style 1 </div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-8" value="0.00"> Pinstripe Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <h2>Awnings</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="awning" style="margin-top:-3px;" id="awn-gray" value="0.00"> Gray</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="awning" style="margin-top:-3px;" id="awn-blue" value="0.00"> Blue</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <h2>Flooring</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Montreal<br />
  <input type="radio" name="flooring" id="floor-montreal" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 1)"> $0 (Standard Option) </div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Canyon<br />
  <input type="radio" name="flooring" id="floor-canyon" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 2)"> $0 (Standard Option)</div>
  </div>

  <div class="build-right"></div>
  </div>
  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Parador<br /> 
  <input type="radio" name="flooring" id="floor-parador" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 3)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Flagstone<br />
  <input type="radio" name="flooring" id="floor-flagstone" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 4)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>



  <h2>Fabrics</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Black Marble<br /> 
  <input type="radio" name="fabric" id="fab-marble" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 1)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Mink<br />
  <input type="radio" name="fabric" id="fab-mink" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 2)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Ocean<br />
  <input type="radio" name="fabric" id="fab-ocean" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 3)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>


  <h2>Countertops</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Standard Countertops & Accents<br /> 
  <input type="radio" name="fg-counter" id="count-stand" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 5)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Paradise Beach Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-pb" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 1)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Tahoe Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-tahoe" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 3)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Baltic Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-baltic" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 2)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Dakota Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-dakota" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 4)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>



  <h2>Options</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">King-Dome<br /> 
  <input type="checkbox" name="opt-king" style="margin-top:-3px;" id="opt-king" value="1500.00"> $1,500</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Solar Package<br /> 
  <input type="checkbox" name="opt-solar" style="margin-top:-3px;" id="opt-solar" value="1800.00"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Additional Awning<br /> 
  <input type="checkbox" name="opt-awning" style="margin-top:-3px;" id="opt-awning" value="900.00"> $900</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Generator Quick Connect<br /> 
  <input type="checkbox" name="opt-genquick" style="margin-top:-3px;" id="opt-genquick" value="469.00"> $469</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Generator Basket<br /> 
  <input type="checkbox" name="opt-genbask" style="margin-top:-3px;" id="opt-genbask" value="250.00"> $250</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">30lb Propane Tank Upgrade<br /> 
  <input type="checkbox" name="opt-30pro" style="margin-top:-3px;" id="opt-30pro" value="99.00"> $99</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Four Trojan T-105 Batteries<br /> 
  <input type="checkbox" name="opt-batt-t105" style="margin-top:-3px;" id="opt-batt-t105" value="400.00"> $400</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Four Trojan AGM Batteries<br /> 
  <input type="checkbox" name="opt-batt-agm" style="margin-top:-3px;" id="opt-batt-agm" value="900.00"> $900</div>
  </div>
  <div class="build-right"</div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Wireless Back Up Camera<br /> 
  <input type="checkbox" name="opt-cam" id="opt-cam" style="margin-top:-3px;" value="700.00"> $700</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Front Propane Quick Connect<br /> 
  <input type="checkbox" name="opt-front-proconnect" style="margin-top:-3px;" id="opt-front-proconnect" value="170.00"> $170</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Back Propane Quick Connect<br /> 
  <input type="checkbox" name="opt-back-proconnect" style="margin-top:-3px;" id="opt-back-proconnect" value="160.00"> $160</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Four Reading Light Package<br /> 
  <input type="checkbox" name="opt-read" id="opt-read" style="margin-top:-3px;" value="199.00"> $199</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Large Inverter<br /> 
  <input type="checkbox" name="opt-large-inv" style="margin-top:-3px;" id="opt-large-inv" value="1200.00"> $1,200</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Small Inverter<br /> 
  <input type="checkbox" name="opt-small-inv" style="margin-top:-3px;" id="opt-small-inv" value="250.00"> $250</div>
  </div>
  <div class="build-right"></div>
  </div>


  </form>
  </div>

  </body>
  </html>

===============>>#1 票数:0 已采纳

编辑2:

如所承诺的,您的代码的有效版本: http : //jsfiddle.net/kychan/PL6fU/

您有一些错误,例如:

$("#total").html(formatCurrency(total));
  • DIV(通常)没有属性“值”。 您必须使用html()使其可见。
  • 在您的代码中未提供check_value,所以我做了一个假人。

总的来说,我认为这就是您想要的。 如果没有,请及时更新,我会修复它!

注意:该代码是安全的FAR。 我不确定您打算如何使用该代码。 JavaScript在本地运行,并且很容易损坏(例如,在装有Internet Explorer 6的旧计算机上)。

切勿过于依赖JavaScript。 如果您打算将代码用于购买,我必须告知您客户可以轻松更改值。

温馨提示

  • 如果可能,将您的代码封装在函数/类中。 切勿重复您之前编写的代码。

  • 同样,将LOGIC与数据分开。 开关盒包含图像的URL,对我来说,这些是数据。

  • 您可以轻松地编写一个构建整个html的简单循环。 这减少了html和javascript代码。 如果您要更改某些内容,则只需应用一条规则即可更改整个格式!

  • 考虑一下架构。 您很有可能不是最后调查代码的人。 如果有人想更改此代码,则将花费一些时间。这就是为什么将代码与数据分开(例如使用JSON)的原因。 然后,如果他们想添加另一个复选框,则只需添加一条JSON行即可使其生效!


真是的 重构代码花了很长时间。 首先,强烈建议将数据和逻辑分开。这将改善调试效果,并允许其他人以正常方式查看代码。

我花了两个 (!!)个小时使代码正常工作。 然后五分钟添加所需的功能。

再也不! 哈哈

这些步骤是:

  • 以(开始+)总价存储变量
  • 自动从JSON生成字段/结构。
  • 向他们添加听众。
  • 单击单击单击。

希望对您有所帮助( 完整的版本 ): http : //jsfiddle.net/kychan/rSVP7/7/embedded/result/

//    storage of price (global).
var total = 39950;

//    create list from JSON.
createList();

//    show price in test div at start.
priceView.html(formatCurrency(total));

//    function to update price on change.
function update(box) {
    //    calculate the price from the value of the selected box.
    var price = parseInt(box.value, 10);
    price = (isNaN(price)) ? 0 : price;

    //    if it is selected, you add the price.
    if (box.checked) total += price;

    //    if not, then remove the price.
    else total -= price;

    //    show the price on a test div.
    priceView.html(formatCurrency(total));

    //    the image to load.
    //img.html('<img src="{0}" />'.f($(box).data('img')));
    img.html($(box).data('img'));
}

  ask by Matt Duncan translate from so

未解决问题?本站智能推荐:

1回复

jQuery更新复选框值,具体取决于单选字段?

目标是将复选框字段更新为等于TRUE或FALSE,这取决于选择了哪个单选按钮选项。 如果我选择FALSE,则必须取消选中复选框。 如果我选择TRUE,则只能勾选复选框。 是否因为我将其定义为值? 从HTML
1回复

Rails 3-复选框取决于单选按钮的选择

我需要一个解决方案来根据单选按钮选择隐藏/显示复选框。 我尝试了在这里和那里找到的其他解决方案,但是我可以使它们工作。 上下文:我拥有可以与公司相关联的联系人。 用户可以选择多个联系人,但必须选择主要联系人。 因此,我有一个单选按钮组,其中所有联系人都可以选择主要联系人,还有一个复选
3回复

显示/隐藏div,取决于单选和复选框按钮

在此页面中: http : //www.metagame.gg/champions/我有几个过滤器来显示或隐藏下面的图片。 我已经创建了一个脚本来显示/隐藏div,具体取决于单选按钮的选择,但是它仅在选择5个选项时才起作用。 此外,我无法弄清楚如何专门对复选框进行编程。 选择不同字
5回复

根据一个或多个复选框/单选框显示/隐藏DIV?

之前我曾问过类似的问题,但它如此模糊,以至于我无法获得想要的答案。 基本上,我希望用户能够从多个选项中进行选择,并根据选择显示各种信息。 例如: 我希望该功能扩展到多个单独的复选框和单选框...? 这可能吗? 编辑: 它用于考虑到您当前系统的硬件升级推荐系统
2回复

使用JavaScript添加或删除输入字段(取决于复选框)

我有带有一些textfields和selections <form>元素,所以我希望在checkbox一个checkbox时添加几个新的<input type="text"> ,而在未选中它时将其删除。 最好的方法是什么? 是否可以将新元素分配给变量或对象,然
4回复

取消选中复选框时如何禁用PHP禁用和清除文本框。 选中/取消选中复选框,具体取决于数据库

如果复选框未选中,我想禁用和清除文本框,然后在选中时启用它。 同时,该复选框应取决于数据库上的值。 如果deductstatus == 1 ,则在加载时应选中此复选框 如果deductstatus == 2 ,则在加载时应取消选中该复选框 下面的代码不起作用。 有什
1回复

重定向取决于选中哪个复选框

大家好:)我的表格有些麻烦 这是我的代码 现在,我希望我的Java(在提交表单之后)重定向到链接,具体取决于所选择的选项,这可能吗? 我用这个重定向,它工作正常 谢谢您的关注
5回复

显示或隐藏div,取决于复选框

我有一个复选框,在该复选框下有一个div区域,我想在其中显示一个下拉列表和另一个复选框。 我只想在选中第一个复选框时显示此区域。 我已经用style.display尝试过了,它可以工作一半。 当我选中复选框时,我可以显示第二个区域,但是如果我取消选中,它不会再次隐藏。 如果我尝试使用
1回复

keyup显示输入和复选框的总val

我有以下代码,非常适合添加复选框的值。 如何向其添加实际输入框: 如果在输入中输入100,它将向#total添加100 并在选中时添加所有选中的复选框 工作示例: JSFIDDLE示例 HTML JQUERY 我想加入: 我希望复选框和输入使用.
2回复

单选框和JQuery

这是我的HTML代码: 这是我的JavaScript代码: 按下按钮时将调用此代码。 为什么我的所有单选按钮都打开了? 如果我添加'name ='标记,并使用PHP完成相同操作,则它确实可以正常工作,而在javascript中,它表示我的按钮始终处于“打开”状态。