Question

我正在尝试使用JavaScript创建一种项目选择器。选择器类似于下面的设置：

<label>Stone</label>
<select id="stone">
  <option value="aquamarine">Aquamarine</option>
  <option value="pink-topaz">Pink Topaz</option>
  <option value="tourmaline">Tourmaline</option>
</select>
<label>Metal</label>
<select id="metal">
  <option value="silver">Silver</option>
  <option value="platinum">Platinum</option>
  <option value="white-gold">White Gold</option>
  <option value="yellow-gold">Yellow Gold</option>
  <option value="rose-gold">Rose Gold</option>
</select>

使用像这样的图像容器：

<img src="path/to/image/silver_aquamarine.jpg" id="imageToSwap">

JavaScript如下：

$('#stone, #metal').on('change', function() {
  $('#imageToSwap').prop('src', ['path/to/image/', $('#metal').val(), '_',     $('#stone').val(), '.jpg'].join('')    
  );
});

所有这一切都很好。我想知道的是（并且事先道歉，因为我不知道如何处理这个问题）是否有一种方法可以提取与图像相关的其他值。例如，我可以引入与该选择相关的价格吗？

或者，我是否应该以完全不同的方式接近这个？也许是一系列的项目，每个都有图像，价格，石头和金属，根据选择显示，但使用类似过滤器的东西？

此外，如果该选项不存在，我还需要创建一个回退。假设除了海蓝宝石+玫瑰金之外，所有组合都存在。我怎么能添加一条消息说“选项不存在”？

这里的任何帮助都将非常感激。

Answer 1

您可以设置一个对象。看起来像是：

var details = {
    stone: {
        aquamarine: 100, // the price is 100 dollars
        "pink-topaz": 75, // the price is 75 dollars
        tourmaline:  88 // and so on
    },
    metal: {
        silver: 140,
        platinum: 250,
        "white-gold": 400,
        "yellow-gold": 390,
        "rose-gold": 420
    }
}
$('#stone, #metal').on('change', function() {
  var metal = $('#metal').val();
  var stone = $('#stone').val();
  var price = details.metal[metal] + details.stone[stone];

  // there is no need in using an array and joining it.
  var src = 'path/to/image/' + metal + '_' + stone + ".jpg";
  $(".details").remove();
  $('#imageToSwap').prop('src', src);
  $("#metal").after('<span class="details"><br/>The price of this image is ' + price + "</span>");
});

看到它正常工作：http://jsfiddle.net/FLTJR/

您唯一需要弄清楚的是价格算法。

Answer 2

如果您知道商品的价格，那么您可以使用data-attributes将它们附加到您的选项，然后使用jQuery访问它们。这是一个工作小提琴：http://jsfiddle.net/PM6qu/

<label>Stone</label>
<select id="stone">
  <option value="aquamarine"  data-stone-price = "2">Aquamarine</option>
  <option value="pink-topaz"  data-stone-price = "3">Pink Topaz</option>
  <option value="tourmaline"  data-stone-price = "4">Tourmaline</option>
</select>
<label>Metal</label>
<select id="metal">
  <option value="silver" data-metal-price = "2">Silver</option>
  <option value="platinum" data-metal-price = "4">Platinum</option>
  <option value="white-gold" data-metal-price = "3">White Gold</option>
  <option value="yellow-gold" data-metal-price = "3">Yellow Gold</option>
  <option value="rose-gold" data-metal-price = "3">Rose Gold</option>
</select>

<img src="path/to/image/silver_aquamarine.jpg" id="imageToSwap">
<div id="price"></div>

访问数据属性：

$('#stone, #metal').on('change', function() {
  $('#imageToSwap').prop('src', ['path/to/image/', $('#metal').val(), '_',     $('#stone').val(), '.jpg'].join('')    
  );
    alert($('#stone option:selected').data('stone-price') + $('#metal option:selected').data('metal-price'));
});

Javascript项目选择器

2 个答案: