jquery - 为 var JQuery 设置价格

Question

我想制作一个 GUI，用户可以在其中按价格选择武器类别，如果需要，可以轻松添加更多。

这可行，但我不知道如何为每种武器添加价格到“conf_pistols”，如果您在下拉列表中更改武器，它将自动更新。

var conf_pistols = {
  "PISTOL": "Pistol",
  "PISTOL50": "Heavy Pistol"
};
var $pistolselect = $('#optgroup_pistol');
$.each(conf_pistols, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value[0]
  }, );
  $pistolselect.append($option);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="weapon_class">Waffenauswahl</label>
<select id="weapon_class" name="weapon_class" class="select_weapon">
  <option value="-1"></option>
  <optgroup id="optgroup_pistol" label="Pistolen">

  </optgroup>
</select>
<div id="weapon_cash" class="pa_cash">
  <p id="weapon_cash_sum" class="pa_cash_sum">0 $</p>
</div>

标签： jquery

Answer 1

将价格添加到您的对象

const conf_pistols = {
  "PISTOL": {
    "name": "Pistol",
    "price": 50
  },
  "PISTOL50": {
    "name": "Heavy Pistol",
    "price": 500
  }
};
var $pistolselect = $('#optgroup_pistol');
$.each(conf_pistols, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value.name
  }, );
  $pistolselect.append($option);
});
$("#weapon_class").on("change",function() {
  $("#weapon_cash_sum").text(conf_pistols[this.value].price)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="weapon_class">Waffenauswahl</label>
<select id="weapon_class" name="weapon_class" class="select_weapon">
  <option value="-1"></option>
  <optgroup id="optgroup_pistol" label="Pistolen">

  </optgroup>
</select>
<div id="weapon_cash" class="pa_cash">
  <p id="weapon_cash_sum" class="pa_cash_sum">0 $</p>
</div>