0

我正在尝试使用 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('')    
  );
});

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

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

此外，如果该选项不存在，我将需要创建一个后备方案。假设所有组合都存在，除了海蓝宝石 + 玫瑰金。如何添加一条消息说“选项不存在”？

这里的任何帮助将不胜感激。

4

2 回答 2

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/

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

于 2013-07-15T18:24:39.907 回答
0

如果您知道商品的价格，那么您可以使用数据属性将它们附加到您的选项中，然后使用 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'));
});
于 2013-07-15T18:31:38.987 回答