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。

E.g

   <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，如下所示。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;