具有相同值但不同代码的两个复选框(Brainteaser)

时间:2018-11-13 15:08:57

标签: javascript jquery html

我正在尝试学习一些HTML和JavaScript(主要是使用C#进行学习),并且我得到了一个朋友的测试,目的是建立一个小型网络商店。

我有一些用于不同项目的复选框,目标是如果我组合不同的产品,我将获得折扣。但是,有两个具有相同值的商品需要不同的折扣组合。但是挑战是我不允许编辑html文件。

是否可以通过JavaScript区分这些项目?唯一不同的是<h2>

同样,我对JavaScript还是很陌生,但是我确实有一些脚本知识,因此,如果您有解决方案,请对函数的功能进行评论,以便更好地在代码中实现。

HTML和代码: 请注意,这不是全部代码,这是我认为针对此问题相互联系的唯一部分。如果需要完整的脚本,我将为其制作一个pastebin。

$('body').on('click', '.fruit, .stuff1, .stuff2, .stuff3', update);

function update(){
  let fruit = $('.fruit>input:checked').val();
  fruit = parseInt(fruit);
  fruit = fruit? fruit : 0;
  
  let price = fruit + stuff1 + stuff2 + stuff3;
//If combined, get discount
//This is for the banana
//This should only apply for banana
  if(fruit == 200 && stuff1 == 100)
  {
    price = price * 0.8;
    $('#confirm').children('h2').text("You get 20% discount");
    
  }
//This is an second discount in a else if ladder
//This is for apple
//This should only apply for apple
   else if(fruit == 200 && stuff1 == 150)
  {
    price = price * 0.9;
    $('#confirm').children('h2').text("You get 10% discount");
  }
  else
  {
    $('#confirm').children('h2').text("You dident get anny discount");
  }
    $('#price').val(price);
  display(price);
}
<div class="picker">
  <div class="fruit">
    <section>
      <h2>Banana</h2>
    </section>
    <input type="radio" name="fruit" value="200">
  </div>
  <div class="fruit">
    <section>
      <h2>Apple</h2>
    </section>
    <input type="radio" name="fruit" value="200">
  </div>
</div>

1 个答案:

答案 0 :(得分:1)

在JavaScript中使用document.getElementsByName("fruit")时,它将返回一个数组;因此,document.getElementsByName("fruit")[0]返回第一个广播,document.getElementsByName("fruit")[1]返回第二个广播。

也就是说,您正在使用jQuery,它是JavaScript框架。 jQuery中执行相同操作的语法是稍短的$('[name="fruit"]')