1

我在练习 JQuery 时遇到了这个问题。

在下面的代码中，我试图在单击“是”时显示一个输入框，并在单击“否”时隐藏它。

当我的 INPUT 标记具有 CLASS 属性时，我的 JQuery 语法中的 ELSE IF 语句可以完美运行。

但是，如果我将 CLASS 属性替换为 ID 属性（ID="box1"，ID="box2"），则只有 IF 语句有效，但 ELSE IF 无效。（请注意，我为 ID 和 CLASS 使用了适当的 Jquery 选择器，所以这可能不是问题）。

有人可以帮我吗？答案可能简单明了，但我是 JQuery 的初学者，这个问题让我感到疑惑。提前致谢！

编辑：这是问题代码：

PS：我在评论中发布此代码时遇到问题，所以我想我会编辑原始代码片段。希望这可以帮助！！！

<style type="text/css">
    #box2{
        display: none;
    }
</style>

<script>
    $(function(){           
        $("#box1").click(function(){
            var x = $(this).val();

            if (x == "Yes")
            {
                $("#box2").css("display", "inline");
            }
            else if (x == "No")
            {
                $("#box2").css("display", "none");
            }               
        }); 
    });
</script>
</head>

<body>  
<input type="radio" name="color" Id="box1" value="Yes"> Yes
<input type="radio" name="color" Id="box1" value="No"> No

<input type="text" size="10" name="exp" Id="box2">
4

3 回答 3

1

正如其他人回答的那样，ID 必须是唯一的；类没有。此外，它会比更改 css 以使用 hide() 和 show() 更好。

改成：

if (x == "Yes")  
{  
 $(".box2").show();  
}  
else if (x == "No")  
{  
  $(".box2").hide();  
}

应该更容易阅读您的代码。另外，考虑研究toggle()。

于 2012-06-30T03:45:24.310 回答
0

使用http://jsfiddle.net/FsaJH/1/的工作演示id

希望您正确添加正确的 id，而不是在 DOM 中复制它们。

如果我错过了什么，请让我知道，这应该会有所帮助

代码

 $(function(){           
        $("#box1, #box2").click(function(){  //<== chaining the ids here
            var x = $(this).val();  

            if (x == "Yes")  
            {  
                $(".box2").css("display", "inline");  
            }  
            else if (x == "No")  
            {  
                $(".box2").css("display", "none");  
            }                 
        });   
    });  ​
于 2012-06-30T02:58:39.667 回答
0

我的疯狂猜测——你实际上并没有显示有问题的代码；您显示工作代码 - 是您在多个元素上使用相同的 ID。ID 应该是唯一的。也就是说，我会这样写：

<input type="radio" name="color" id="box1" value="Yes"> Yes  
<input type="radio" name="color" id="box2" value="No"> No  

<input type="text" size="10" name="exp" id="box3">

JavaScript：

$(function(){           
    $("#box1, #box2").click(function(){  
        var x = $(this).val(); 
        $("#box3").css("display", x == "Yes" ? "inline" : "none");       
    });   
});

例子：

于 2012-06-30T03:02:55.233 回答