Question

我得到的这个剧本在小提琴上完全正常，但不在我的网站上工作。

现场代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(".hiddenInput").hide();
$(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.slideDown();
    } else {
        $input.slideUp();
    }
});
</script>
</head>
<body>
<form>
    <div class="option">
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput"> Enter
        <input type="text" name="txtBox1"/></div>
    </div>
    <div class="option">
                <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput">Enter
        <input type="text" name="txtBox2"/></div>
    </div>
</form>
</body>
</html>

Answer 1

您正在执行

$(".hiddenInput").hide();

在加载元素之前，在标题上

。尝试将脚本放在正文上的元素之后：

...
    <div class="option">
            <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
    <br/><div class="hiddenInput">Enter
    <input type="text" name="txtBox2"/></div>
</div>
<script type="text/javascript">
    $(".hiddenInput").hide();
    $(".showHideCheck").on("change", function() {
        $this = $(this);
        $input = $this.parent().find(".hiddenInput");
        if($this.is(":checked")) {
            $input.slideDown();
        } else {
            $input.slideUp();
        }
    });
</script>

或者设置一个在加载事件上执行的函数：

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function start() {
        $(".hiddenInput").hide();
        $(".showHideCheck").on("change", function() {
            $this = $(this);
            $input = $this.parent().find(".hiddenInput");
            if($this.is(":checked")) {
                $input.slideDown();
            } else {
                $input.slideUp();
            }
        });
    }
</script>
</head>
<body onload="start()>
    ...
</body>

Answer 2

问题是您在页面中加载元素之前尝试使用这些元素。因此，有两种更简单的方法可以解决您的问题。

<强>第一

您可以使用jQuery's document ready event：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // encapsulate your code into a function and pass it to jQuery
  $(".hiddenInput").hide();
  $(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.slideDown();
    } else {
        $input.slideUp();
    }
  });
});
</script>
</head>
<body>
<form>
    <div class="option">
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput"> Enter
        <input type="text" name="txtBox1"/></div>
    </div>
    <div class="option">
                <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput">Enter
        <input type="text" name="txtBox2"/></div>
    </div>
</form>
</body>
</html>

<强>第二

您可以完整地保留您的代码，但将脚本放在body标记的末尾之前：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form>
    <div class="option">
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput"> Enter
        <input type="text" name="txtBox1"/></div>
    </div>
    <div class="option">
                <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput">Enter
        <input type="text" name="txtBox2"/></div>
    </div>
</form>
<script type="text/javascript">
$(".hiddenInput").hide();
$(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.slideDown();
    } else {
        $input.slideUp();
    }
});
</script>
</body>
</html>

Answer 3

将其包装在document.ready中：

$(document).ready(function(){

    $(".hiddenInput").hide();
        $(".showHideCheck").on("change", function() {
            $this = $(this);
            $input = $this.parent().find(".hiddenInput");
            if($this.is(":checked")) {
               $input.slideDown();
           } else {
              $input.slideUp();
           }
       });
 });

Answer 4

如果您的网站恰好是wordpress网站，则结帐jQuery JavaScript not working on Wordpress, confused about no-conflict mode syntax。

如果是wordpress，请尝试：

  jQuery(document).ready(function( $ ) {

   // $ Works! You can test it with next line if you like
   // console.log($);
   // put code here

   });

如果你不使用wordpress，试试这个：

$( document ).ready(function() {
  // put code here
});

根据复选框隐藏或显示输入字段

4 个答案: