Javascript項目選擇器

Question

我想創建一種使用JavaScript的項目選擇器。如下

<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('')  
); 
}); 

和一切工作只是選擇將類似於下面的設置：

<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> 

隨着圖像容器，像這樣精細。我想知道的是（對於不知道如何處理這個問題，事先道歉）是否有一種方式拉動與圖像相關的其他值。例如，我可以帶來與該選擇相關的價格嗎？

或者，我應該以完全不同的方式來解決這個問題嗎？也許是一系列的項目，每個都有一個圖像，價格，石頭和金屬，基於選擇顯示，但使用類似於過濾器的東西？

此外，如果選項不存在，我將需要創建一個回退。假設除了海藍寶石+玫瑰金之外，所有組合都存在。我怎麼能添加一條消息說「選項不存在」？

在這裏的任何幫助將非常感激。

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> 

訪問數據atributes：

$('#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')); 
});