使用jquery从数组或switch语句取代输入值

Question

大家好，首先我的脚本工作正常，但我想解决这个有点恼人的问题，但我不确定是否可能。

我有这样的表单元素，如选择， datalist 和输入类型，如收音机和复选框的方式我编码的条件语句是我依赖它的值我的问题发生导致如果我以后更改值？我也必须改变我的代码。

示例我有这个无线电输入，用户必须选择他们想要的餐点

<h2>Question 1: meal</h2>
  <div class="meal-wrapper">
    <label class="radio">
      <input name="meal-356" value="Burger with fries" type="radio"/>
      Burger with fries
    </label>
  </div>
  <div>
   <label class="radio">
     <input name="meal-356" value="Chicken with rice" type="radio" />
     Chicken with rice</label>
  </div>

如果用户选择“带炸薯条的汉堡”

，则为他们选择的示例添加值

$('input:radio[name="meal-356"]').change(function(ev) {

  if ($(this).val() == 'Burger with fries') {
    var meal = 20;
  } else {
    var meal = 30;
  }
  $('#meal').text((meal).toFixed(2)).trigger('change');

});

现在我想要的是，我可以只使用数组，而不是依赖于输入值，或者它太难了，或者你可以提出一个更简单的解决方案，这样我就不必每当输入值是手动编辑代码改变

提前谢谢，这是我的完整脚本

$(document).ready(function() {

    $('input:radio[name="meal-356"]').change(function(ev){

        if ($(this).val() == 'Burger with fries') {
            var meal = 20;
        }
        else {
            var meal = 30;
        }

        $('#meal').text((meal).toFixed(2)).trigger('change');

    });

    $('input:radio[name="drinks-123"]').change(function(ev){

        if ($(this).val() == 'Ice Tea') {
            var drinks = 1;
        }
        else if ($(this).val() == 'Coke') {
            var drinks = 1.20;
        }
        else if ($(this).val() == 'Lemonade') {
            var drinks = 2;
        }
        else if ($(this).val() == 'Water') {
            var drinks = 1.75;
        }
        else if ($(this).val() == 'Hot choco') {
            var drinks = 3;
        }
        else if ($(this).val() == 'Hot coffee') {
            var drinks = 1.25;
        }
        else {
            var drinks = 0;
        }

        $('#drinks').text((drinks).toFixed(2)).trigger('change');
    });


    $('input:radio[name="extras-781"]').change(function(ev){

        if ($(this).val() == 'Rice') {
            var extras = 10;
        }
        else if ($(this).val() == 'Gravy') {
            var extras = 5;
        }
        else {
            var extras = 0;
        }
        $('#extras').text((extras).toFixed(2)).trigger('change');
    });

    $('textarea[name="spoon-112"]').keyup(function(ev){

        var spoon = $(this).val().replace(/\n/g, '<br/>');
		var spoon = spoon*.25;
        $("#spoon").text(spoon).trigger('change');

    });

    $('input:text[name="fork-143"]').keyup(function(ev){

        var fork = $(this).val().replace(/\n/g, '<br/>');
		var fork = fork*.5;
        $("#fork").text(fork).trigger('change');
    });



    $('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) {
        var total = $('#meal, #drinks, #extras, #spoon, #fork').toArray().reduce(function(acc, val) {
            return acc + +val.textContent   ;
        }, 0);
        $('#total').text(total.toFixed(2));
    })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Calculator base on radio buttons</h1>
<h2>Question 1: meal</h2>
<div class="meal-wrapper">
    <label class="radio"><input name="meal-356" value="Burger with fries" type="radio"/>Burger with fries</label>
<br />
    <label class="radio"><input name="meal-356" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>

<h2>Question 2: drinks</h2>
<div class="drinks-123-wrapper">
    <input type="radio" name="drinks-123" value="Ice Tea" /> Ice Tea
    <input type="radio" name="drinks-123" value="Coke" /> Coke
    <input type="radio" name="drinks-123" value="Lemonade" /> Lemonade
    <input type="radio" name="drinks-123" value="Water" /> Water
    <input type="radio" name="drinks-123" value="Hot choco" /> Hot choco
    <input type="radio" name="drinks-123" value="Hot coffee" /> Hot coffee
    <input type="radio" name="drinks-123" value="No drinks-123" /> No drinks-123
</div>

<h2>Question 3: extras</h2>
<div class="drinks-wrapper">
    <input type="radio" name="extras-781" value="Rice" /> Rice
    <input type="radio" name="extras-781" value="Gravy" /> Gravy
    <input type="radio" name="extras-781" value="No Extra" /> No Extra
</div>

<h2>Question 4: How many extra spoon?</h2>
<div class="spoon-wrapper">
    <textarea name="spoon-112" rows="3"></textarea>
</div>

<h2>Question 5: How many extra fork?</h2>
<div class="fork-wrapper">
    <input name="fork-143" type="text" value="" placeholder=""/>
</div>

<hr />
<div class="price-wrapper">
    <b>meal:</b> <span id="meal"></span>
    <div></div>
    <b>drinks:</b> <span id="drinks"></span>
    <div></div>
    <b>extras:</b> <span id="extras"></span>
    <div></div>
    <b>spoon:</b> <span id="spoon"></span>
    <div></div>
    <b>fork:</b> <span id="fork"></span>
</div>

<div class="total-wrapper">
    <h3>
        <b>Total:</b><span id="total"></span>
    </h3>
</div>

Answer 1

我建议您使用Map数据类型，该数据类型使用[key,value]对。我认为它适用于您的情况，假设没有任何重复的密钥。

$(document).ready(function() {
    var mealMap = new Map();
    mealMap.set("Burger with fries", 20);
    mealMap.set("Chicken with rice", 30);
    $('input:radio[name="meal-356"]').change(function(ev){
        var meal = mealMap.get($(this).val());
        $('#meal').text((meal).toFixed(2)).trigger('change');

    });
});

编辑：

根据您的需要，它只能取决于input的{​​{3}}。

$(document).ready(function(){
  $('.meal-wrapper input:radio[name="meal-356"]').change(function(ev){
    if ($( '.meal-wrapper input:radio[name="meal-356"]' ).index( this ) == 0) {
      var meal = 20;   
    } else if ($( '.meal-wrapper input:radio[name="meal-356"]' ).index( this ) == 1) {
      var meal = 30;
    }
    $('#meal').text((meal).toFixed(2)).trigger('change');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Calculator base on radio buttons</h1>
<h2>Question 1: meal</h2>
<div class="meal-wrapper">
    <label class="radio"><input name="meal-356" value="Burger with fries" type="radio"/>Burger with fries</label>
<br />
    <label class="radio"><input name="meal-356" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>