Question

我正在尝试使用jQuery的.toggle()来显示和隐藏三个div中的一个。 div具有唯一ID，并且div被切换的决定取决于已选择三个单选按钮中的哪一个。三个单选按钮的值对应于div的ID。因此，如果有人点击-1电台，则应切换标识为cMB_0292_A07.m1的div。

但是我根本没有得到任何回复，并且我没有尝试过调试器中的任何错误报告。有什么问题？

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function showdiv(obj) {
            var n = obj.name;
            var v = $("input:radio[name='" + n + "']:checked").val();
            alert(v);
            $("#" + v).toggle();
        }
    </script>
</head>
<body>
    <input name="cMB_0292_A07" value="cMB_0292_A07.m1" onclick="showdiv(this);" type="radio">-1
    <input name="cMB_0292_A07" value="cMB_0292_A07.0" onclick="showdiv(this);" type="radio">0
    <input name="cMB_0292_A07" value="cMB_0292_A07.p1" onclick="showdiv(this);" type="radio">+1
    <div id="cMB_0292_A07.m1" style="display: none">minus1</div>
    <div id="cMB_0292_A07.0" style="display: none">zero</div>
    <div id="cMB_0292_A07.p1" style="display: none">plus1</div>
</body>
</html>

Answer 1

这实际上是两部分问题

首先，您不应在ID中拥有.。

其次，jQuery看到了这一点：$('#ID.CLASS') 它正在搜索DOM，寻找ID：cMB_0292_A07，然后搜索m1的子类。

您可以通过移除ID中的句点或使用正则表达式选择器[id=""]来解决此问题。

 $('[id="' + v + '"]').toggle();

<强> jsFiddle DEMO

其他注释，请勿使用onClick个事件。最好将业务逻辑与业务逻辑分开。表示逻辑。使用jQuery .on('click', function () {});事件！

Answer 2

您无法使用.，因为它会查找具有课程m1或0或p1的孩子。

查看以下代码段：

＆＃13;

$(document).ready(function(){
    $("input[type='radio']").click(function(){
        alert($("#"+$(this).val()).length);
      });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">-1
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">0
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">+1
<div id="cMB_0292_A07" style="display: none">minus1</div>
<div id="cMB_0292_A07" style="display: none">zero</div>
<div id="cMB_0292_A07" style="display: none">plus1</div>

＆＃13;

使用输入值作为id切换问题

2 个答案: