Question

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

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()">

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

Answer 1

您在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);
    });
});

这样，当文档准备就绪时，就会设置click事件，并且您不需要单选按钮上的onClick属性。

Answer 2

看起来hide()导致了问题。试试这个fiddle。

Answer 3

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

试试这个：

$(document).ready(function(){
  $(':radio[name=field1]').change(function () {
     if($(this).val()=='Y'){
       $("div#hidden").fadeOut(2000);
     }
     else{
       $("div#hidden").fadeIn(2000);
     }
  });
});

JQuery显示/隐藏字段第一次无法正常工作

3 个答案: