Question

我试图使用javascript函数使一个简单的输入文本框消失，我使用css使其消失，但javascript部分使其淡入淡出不会工作。我从here得到了小提琴。

我页面的淡化版本如下所示：

<html lang="en">

<head>  
    <title>Volunteer Form</title>
    <script type="text/javascript" src="script.js"></script> 
    <style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
    .todisplay {
    display:none;
    }
    </style>
</head>
<body>

<input type="checkbox" name="typeofwork[]" value="other" class='checkdisplay' > Other <br><br>

<div class='todisplay'>
    <b>Other Tasks</b><br>
    if checked other, type below.<br>
    <input type="text" name="othertasks"><br><br>
</div>

<div class='todisplay'>test</div>

我在同一个目录中创建了一个javascript文件，并将其命名为script.js：

$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');

    });
});

我还尝试在和标签之间的页面底部放置相同的脚本，如下所示：

</body>
<script type="text/javascript" src="script.js">
$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');

    });
});</script> 
</html>

对不起，我在javascript上很糟糕，我尝试从另一个堆栈溢出页面跟随小提琴指令，我不知道为什么它不会执行。我尝试了所有我能想到的东西。有人可以帮忙吗？

Answer 1

不要忘记导入JQuery库。

另外（这与您的问题无关），将{和}放在控件块（if语句的分支，循环等）周围，以避免混淆和防止代码中的错误。

此外，在元素的name或id属性中使用特殊字符通常是个坏主意。您有name="typeofwork[]"作为复选框的名称。您应该考虑将其更改为字母数字值。

＆＃13;

// This code can be in an external script file, but you will have to reference that file
// similarly to the way JQuery is imported with the HTML <script> element. Or, you
// can place this code in a <script> element and place that element at the bottom of your
// HTML (just before the closing body tag) or inside the HTML <head> section.
$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) { 
          $('.todisplay').fadeIn('slow'); 
        }
        else {
          $('.todisplay').fadeOut('slow'); 
        }

    });
});

＆＃13;

<html lang="en">

<head>  
    <title>Volunteer Form</title>
    <style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
    .todisplay {
    display:none;
    }
    </style>
    
    <!-- This must preceed any code that uses JQuery. It links out to that library so you can use it -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script> 
</head>
<body>

<input type="checkbox" name="typeofwork[]" value="other" class='checkdisplay' > Other <br><br>

<div class='todisplay'>
    <b>Other Tasks</b><br>
    if checked other, type below.<br>
    <input type="text" name="othertasks"><br><br>
</div>

<div class='todisplay'>test</div>

＆＃13;

在网页上运行JS功能的问题

1 个答案: