Question

我正在为我的网站制作一个自定义计算机构建器，就像你在戴尔等人那样看到的。

基本上你可以选择你的处理器，它们的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"的主板将显示（如果他们选择不同的处理器，也需要选择第一个。

任何人都可以帮助我吗？

Answer 1

如果你只想找到data-socket="someValue"的所有主板，你可以试试这个，如果你使用的是jQuery

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

这将为您提供名称为motherboard_options和套接字值'someValue'

的所有选项

Answer 2

这样的事情应该这样做：

$('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">元素，而不隐藏它们附带的文本。您可能希望将其包装在您可以隐藏的另一个元素（例如<li>内的<ul>）中，以便隐藏相应的文本。

DEMO

注意到<input>元素包含<label>元素，因此您可以使用以下代码来隐藏文本：

$('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

仅显示前一个无线电设置的数据套接字无线电

2 个答案: