Question

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

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

当我的INPUT标记具有CLASS属性时，我的JQuery语法中的ELSE IF语句非常有效。

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

有人可以帮我这个吗？答案可能很简单明了，但我是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">

Answer 1

正如其他人所回答的那样，身份证必须是独一无二的;上课没有。此外，它比使用hide（）和show（）更改css更好。

更改为：

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

应该更容易阅读您的代码。另外，考虑学习toggle（）。

Answer 2

使用id http://jsfiddle.net/FsaJH/1/

工作演示

希望您正确添加正确的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");  
            }                 
        });   
    });

Answer 3

我疯狂的猜测 - 你实际上并没有显示出问题的代码;您显示工作代码 - 是您在多个元素上使用相同的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");       
    });   
});

示例：

http://jsfiddle.net/WgLUt/

ID属性不起作用，但CLASS呢？

3 个答案: