jquery / js：无法使单选按钮可点击

Question

我有一个初学者的小问题，我无法使 DIV 内的按钮可点击。

顶部有 5 个按钮可以完美运行。单击时会出现第二行（并且确实会出现），但我无法单击它们。这是为什么呢？

这是链接：https://jsfiddle.net/yello/1me8naee/

代码：

       $(document).ready(function() {
                $('#div1,#div2,#div3').hide();
                $('#mod-7').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-7p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6s').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').show('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-se').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').hide('fast');
                  $('#div3').show('fast');
                });
              });

.segmented {
  padding: 12px;
}

.segmented input[type=radio] {
  display: none;
}

.segmented label {
  border: outset 1px silver;
  padding: 2px 16px;
  margin-right: -5px;
  background: #ddd;
  cursor: pointer;
}

.segmented input:checked + label {
  border: inset 1px silver;
  background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="segmented">
  <input type="radio" name="mod-1" value="Organisation" id="mod-7">
  <label for="mod-7">iPhone 7</label>

  <input type="radio" name="mod-1" value="Users" id="mod-7p">
  <label for="mod-7p">iPhone 7 Plus</label>

  <input type="radio" name="mod-1" value="Units" id="mod-6s">
  <label for="mod-6s">iPhone 6s</label>

  <input type="radio" name="mod-1" value="Tags" id="mod-6sp">
  <label for="mod-6sp">iPhone 6s Plus</label>

  <input type="radio" name="mod-1" value="Tags2" id="mod-se">
  <label for="mod-se">iPhone SE</label>


  <div align="center" style="padding:25px;width: 300px;">

    <div id="div1">
      <input type="radio" name="mem" id="32" value="32">
      <label for="mem">32Gb</label>
      <input type="radio" name="mem" id="128" value="128">
      <label for="mem">128Gb</label>
      <input type="radio" name="mem" id="256" value="256">
      <label for="mem">256Gb</label>
    </div>

    <div id="div2">
      <input type="radio" name="mem" id="32" value="32">
      <label for="mem">32Gb</label>
      <input type="radio" name="mem" id="128" value="128">
      <label for="mem">128Gb</label>
    </div>

    <div id="div3">
      <input type="radio" name="mem" id="32" value="32">
      <label for="mem">32Gb</label>
      <input type="radio" name="mem" id="64" value="64">
      <label for="mem">64Gb</label>
    </div>

  </div>

</nav>

Answer 1

您的代码运行良好。您只需要在标签中添加 id。

例如

   <div id="div1">
      <input type="radio" name="mem" id="32" value="32">
      <label for="32">32Gb</label>
      <input type="radio" name="mem" id="128" value="128">
      <label for="128">128Gb</label>
      <input type="radio" name="mem" id="256" value="256">
      <label for="256">256Gb</label>
    </div>

https://jsfiddle.net/1me8naee/12/

您还应该有每个型号特定的 id，否则会有冲突，例如 32 iphone 6 和 32 iphone 7。

Answer 2

在for="mem3-64" 中，您必须提供单选按钮的 ID，如下所示。

       $(document).ready(function() {
                $('#div1,#div2,#div3').hide();
                $('#mod-7').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-7p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6s').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').show('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-se').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').hide('fast');
                  $('#div3').show('fast');
                });
              });

.segmented {
  padding: 12px;
}

.segmented input[type=radio] {
  display: none;
}

.segmented label {
  border: outset 1px silver;
  padding: 2px 16px;
  margin-right: -5px;
  background: #ddd;
  cursor: pointer;
}

.segmented input:checked + label {
  border: inset 1px silver;
  background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="segmented">
  <input type="radio" name="mod-1" value="Organisation" id="mod-7">
  <label for="mod-7">iPhone 7</label>

  <input type="radio" name="mod-1" value="Users" id="mod-7p">
  <label for="mod-7p">iPhone 7 Plus</label>

  <input type="radio" name="mod-1" value="Units" id="mod-6s">
  <label for="mod-6s">iPhone 6s</label>

  <input type="radio" name="mod-1" value="Tags" id="mod-6sp">
  <label for="mod-6sp">iPhone 6s Plus</label>

  <input type="radio" name="mod-1" value="Tags2" id="mod-se">
  <label for="mod-se">iPhone SE</label>


  <div align="center" style="padding:25px;width: 300px;">

    <div id="div1">
      <input type="radio" name="mem" id="mem1-32" value="32">
      <label for="mem1-32">32Gb</label>
      <input type="radio" name="mem" id="mem1-128" value="128">
      <label for="mem1-128">128Gb</label>
      <input type="radio" name="mem" id="mem1-256" value="256">
      <label for="mem1-256">256Gb</label>
    </div>

    <div id="div2">
      <input type="radio" name="mem" id="mem2-32" value="32">
      <label for="mem2-32">32Gb</label>
      <input type="radio" name="mem" id="mem2-128" value="128">
      <label for="mem2-128">128Gb</label>
    </div>

    <div id="div3">
      <input type="radio" name="mem" id="mem3-32" value="32">
      <label for="mem3-32">32Gb</label>
      <input type="radio" name="mem" id="mem3-64" value="64">
      <label for="mem3-64">64Gb</label>
    </div>

  </div>

</nav>