Question

我正试图在我的机器上本地重新创建这个JSfiddle：

我不明白，因为它会像上面的小提琴一样转到菜单屏幕，但动画不会发生，问题不会循环。它只能保持长度？问题并留在那里，没有任何按钮会做任何事情。

我有3个文件：index.html，js.js和styles.css。

的index.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js.js"></script>

</head>

<body>

<!-- start questionaire -->

<form class="questionnaire">
    <fieldset>
         <h3>length?</h3>

        <label>
            <input name="length" value="5" type="radio" />Too big</label>
        <label>
            <input name="length" value="4" type="radio" />big</label>
        <label>
            <input name="length" value="3" type="radio" />medium</label>
        <label>
            <input name="length" value="2" type="radio" />small</label>
        <label>
            <input name="length" value="1" type="radio" />tiny</label>
    </fieldset>
    <fieldset>
         <h3>width?</h3>

        <label>
            <input name="width" value="5" type="radio" />Too big</label>
        <label>
            <input name="width" value="4" type="radio" />big</label>
        <label>
            <input name="width" value="3" type="radio" />medium</label>
        <label>
            <input name="width" value="2" type="radio" />small</label>
        <label>
            <input name="width" value="1" type="radio" />tiny</label>
    </fieldset>
    <fieldset>
         <h3>weight?</h3>

        <label>
            <input name="weight" value="5" type="radio" />Too big</label>
        <label>
            <input name="weight" value="4" type="radio" />big</label>
        <label>
            <input name="weight" value="3" type="radio" />medium</label>
        <label>
            <input name="weight" value="2" type="radio" />small</label>
        <label>
            <input name="weight" value="1" type="radio" />tiny</label>
    </fieldset>
    <button class="back" type="button">back</button>
</form>


<!-- end questionaire -->





</body>
</html>

styles.css的：

        @charset "utf-8";
    /* CSS Document */

    .questionnaire label {
        display:block;
        clear:both
    }
    .questionnaire fieldset:not(:first-child) {
        display:none
    }

js.js：

$(function () {
    $(".questionnaire input[type='radio']").click(function () {
        var fs = $(this).closest("fieldset"),
            next = fs.nextAll('fieldset:first');
        fs.slideUp('fast');
        if (next.length) {
            next.slideDown('fast')
        } else {
            alert("do some computation")
        }
    })
    $(".questionnaire button.back").click(function(){
        var fs=$(this).siblings(":visible"),
            prev=fs.prevAll('fieldset:first');
        if (prev.length){
            fs.slideUp('fast')
            prev.slideDown('fast')
        }
    })
})

Answer 1

看起来您已将jQuery加载到js.js依赖的页面中。

浏览器错误控制台或调试控制台中应该存在错误，这些错误会指向您一些有用的方向。如果你在某些事情不起作用的时候首先看到那里，那么这是首先要学习的东西之一。

你能在我的Javascript文件中看到遗漏的东西吗？

1 个答案: