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

你的代码运行得很好。只需将ids添加到标签中即可。

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/

另外，您应该有特定于每个型号的ids，否则就会出现冲突，例如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>

​