0

我在这段代码中遇到了一些问题。它有效，但只有在我单击单选按钮后，它才会受到两次影响。当我第一次单击该按钮时，它不起作用，但是如果我再次单击它，它就会起作用。难道我做错了什么？有没有更好的方法来做到这一点？

function hide(){
   $(document).ready(function(){
      $("input[id$='yes']").click(function(){
         $("div#hidden").fadeOut(2000);
      });
   });
};

这就是我的标题中的内容。我有另一个，就像它被称为 show() 一样，它受另一个单选按钮的影响。当您单击一个时，它会隐藏一个 div，当您单击另一个时，它会显示它。

这是影响脚本是否隐藏或显示 div 的单选按钮。

<input type="radio" name="field1" id="yes" value="Y" onClick="hide();" />Yes

再一次，还有另一个就像它一样，只是它不是。现在，被隐藏的 div 是：

<div id="hidden"><input type="text" name="extrafield1" id="no_box" size="20" maxlength="20" /></div>

同样，当单击 No 单选按钮时，它应该出现，当单击 Yes 单选按钮时，它应该隐藏。它可以工作，但您必须单击单选按钮两次。

此代码段在页面加载时隐藏了 div：

function loadHidden(){
    $("div#hidden").hide();
}

<body onLoad="loadHidden()">

任何帮助，将不胜感激。谢谢。

4

3 回答 3

0

您在 hide 函数中定义了 document.ready 事件，因此在文档首次加载时未注册 click 函数的事件。试试这样的结构：

$(document).ready(function(){
    $("input[id$='yes']").click(function(){
        $("div#hidden").fadeOut(2000);
    });

    $("input[id$='no']").click(function(){
        $("div#hidden").fadeIn(2000);
    });
});

这样，当文档准备好时，点击事件就全部设置好了，并且您不需要单选按钮上的 onClick 属性。

于 2013-04-15T21:34:18.950 回答
0

看起来hide()是造成了问题。试试这个小提琴。

于 2013-04-15T21:34:38.923 回答
0

只需将您的逻辑写入 document.ready 中的元素点击事件即可。

尝试这个：

$(document).ready(function(){
  $(':radio[name=field1]').change(function () {
     if($(this).val()=='Y'){
       $("div#hidden").fadeOut(2000);
     }
     else{
       $("div#hidden").fadeIn(2000);
     }
  });
});
于 2013-04-15T21:57:55.610 回答