只顯示前面收音機設置的數據套接字的收音機

我正在爲我的網站製作一個自定義計算機生成器，就像你在戴爾等人看到的一樣。只顯示前面收音機設置的數據套接字的收音機

基本上你可以選擇你的處理器，爲他們的HTML看起來像這樣：

<div class="process_intel_options" style="display:block"> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="124" data-price="195.82" data-socket="1366" class="calculation-item" id="intel_options_0" checked="checked" /> 
     Intel Core i7 960 3.20Ghz (Nehalem) <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="149" data-price="250.00" data-socket="1155" class="calculation-item" /> 
     Processor socket 1155 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="125" data-price="359.99" data-socket="1366" class="calculation-item" /> 
     Intel Core i7 980 3.33Ghz (Gulftown) <span class="item_price positive">+0</span> </label> 
    <br /> 
</div> 
<div class="process_amd_options" style="display:none"> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="126" data-price="133.32" data-socket="am3" class="calculation-item" id="amd_options_0" /> 
     AMD Bulldozer FX-8 Eight Core 8120 3.10Ghz <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="127" data-price="162.99" data-socket="am3" class="calculation-item" /> 
     AMD Bulldozer FX-8 Eight Core 8150 3.60Ghz <span class="item_price positive">+0</span> </label> 
</div>

通知屬性data-socket。

您可以再選擇主板：

<div class="mobo_options"> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="145" data-price="178.00" data-socket="1155" class="calculation-item" id="mobo_options_0" checked="checked" /> 
     Motherboard 1 socket 1155 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="146" data-price="180.00" data-socket="1155" class="calculation-item" /> 
     Motherboard 2 socket 1155 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="147" data-price="190.00" data-socket="1366" class="calculation-item" /> 
     Motherboard 3 socket 1366 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="148" data-price="200.00" data-socket="2011" class="calculation-item" /> 
     Motherboard 4 socket 2011 <span class="item_price positive">+0</span> </label> 
    <br /> 
</div>

這也有數據插槽。

我正在尋找一個查詢腳本，將僅顯示具有正確的插座類型的處理器，例如主板，如果處理器選擇具有data-socket="1155"然後僅主機板data-socket="1155"將示出（也在第一人們需要的情況下進行選擇，他們選擇不同的處理器。

誰能幫助我？

來源

2012-02-21 Adam

像這樣的東西應該這樣做：

$('input:radio[name="processor_options"]').change(function(e) { 
    var socket = $(this).data('socket'); 
    $('div.mobo_options input:radio[data-socket!="' + socket + '"]').hide(); 
    $('div.mobo_options input:radio[data-socket="' + socket + '"]').show().get(0).checked = true; 
});

注意，它只是隱藏<input type="radio">元素，而不是文本伴隨着他們。您可能想要將其包裹在另一個可隱藏的元素中（例如<ul>內的<li>），因此附帶的文本也會隱藏起來。

DEMO

只注意到你有包裹在<label>元素<input>元素，所以你可以使用下面的代碼，而不是隱藏文本：

$('input:radio[name="processor_options"]').change(function(e) { 
    var socket = $(this).data('socket'); 
    $('div.mobo_options input:radio[data-socket!="' + socket + '"]').closest('label').hide(); 
    $('div.mobo_options input:radio[data-socket="' + socket + '"]').closest('label').show().end().get(0).checked = true; 
});

Updated DEMO

來源

2012-02-21 10:13:09

嗨，這工作，但我努力實現它，以我的主要代碼，你可以看看這個小提琴嗎？ http://jsfiddle.net/Genyx/rnkFr/1/ – Adam 2012-02-21 10:42:33

我的答案中的代碼取決於'this'這個事實是已經改變的無線電元件。由於在你的代碼中你不是這樣（你把它作爲一個函數來調用，而不僅僅是事件的結果），所以我修改了它來選擇當前選擇的單選按鈕，其中name =「processor_options」和使用它，而不是'this'。 [已更新jsFiddle]（http://jsfiddle.net/anthonygrist/rnkFr/2/） – 2012-02-21 10:49:48

非常感謝！ – Adam 2012-02-21 11:00:46

如果你只是想找到所有與data-socket="someValue"的主板，如果你正在使用jQuery

$('[data-socket="someValue"][name="motherboard_options"]')

你可以試試這個

這會給你的名字motherboard_options和插座值的所有選項「someValue中」

來源

2012-02-21 10:08:22

只顯示前面收音機設置的數據套接字的收音機

回答

相關問題