Question

您看到的代码由Stack Overflow用户提供给我，他的JSFiddle可以在http://jsfiddle.net/f18513hw/找到。他的代码在JSFiddle中运行得很好。我将他的代码复制并粘贴到我的Textpad中并将其保存在我的XAMPP的htdocs文件夹中并尝试运行它。

我发现当我将光标放在汽车的图标上时，图标会放大（就像它应该的那样），但我没有在图标下面出现文本框。这就是我的网页的整体想法，将鼠标放在图像上并出现文本框，然后用户将他的评论插入到框中。当我问Stack Overflow用户为什么没有出现文本框时，一位女士慷慨地指出我错过了jQuery库链接，所以我也把它放进去了。

我检查并重新检查了代码的布局（JavaScript和jQuery链接放在head标签中，CSS代码放在样式标签中）似乎没有错，但代码仍然没有运行。由于脚本的 none 是服务器端的，所以我决定不使用XAMPP，只是将脚本保存在＆＃34; My Document＆＃34;并在浏览器上运行它，但没有任何改变。有人可以告诉我我做错了什么吗？如果代码在JFiddle中运行，是否有任何押韵或原因不应该在浏览器上运行？这太荒谬了。

<!DOCTYPE html>
<html>
    <head>
        <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
        <script>
            $('.car').click(function() {
                $('.comment').css("visibility", "hidden");
                $('#button').css("visibility", "hidden");

                var id = $(this).children('label').attr('for');
                var buttonOffset;
                switch (id) {
                    case 'mercedesbenz':
                        buttonOffset = '0';
                        break;
                    case 'porche':
                        buttonOffset = '33%';
                        break;
                    case 'bmw':
                        buttonOffset = '66%';
                        break;
                }

                $(this).children('.comment').css("visibility", "visible");
                $('#button').css("left", buttonOffset);
                $('#button').css("visibility", "visible");
            });

            $('.comment').mouseleave(function() {
                setTimeout(function() {
                    $('.comment').css("visibility", "hidden");
                    $('#button').css("visibility", "hidden");
                }, 500);
            });
        </script>
        <style>
            #form {
                position: absolute;
                overflow: hidden;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%)
            }
            .car {
                float: left;
                margin: 2% 2% 5% 2%;
            }

            .car label img {
                transform: scale(0.8);
                transition-duration: 0.2s;
            }

            .car label img:hover {
                cursor: pointer;
                transform: scale(1);
            }

            .comment {
                position: absolute;
                visibility: hidden;
            }

            .comment input {
                width: 128px;
                font-size: 1em;
            }

            .car label img {
                width: 128px;
                display: block;
            }

            #button {
                position: relative;
                left: 66%;
                margin: 2%;
                visibility: hidden;
            }
         </style>
    </head>
    <body>
        <div id="form">
            <form method="post" action="#">
                <div class="car">
                    <label for="mercedesbenz">
                        <img src="http://tinyurl.com/on964r9" />
                    </label>
                    <div class="comment">
                        <input type="text" id="mercedesbenz" placeholder="Merc" />
                    </div>
                </div>
                <div class="car">
                    <label for="porche">
                        <img src="http://tinyurl.com/on964r9" />
                    </label>
                    <div class="comment">
                        <input type="text" id="Porche" placeholder="Porc" />
                    </div>
                </div>
                <div class="car">
                    <label for="bmw">
                        <img src="http://tinyurl.com/on964r9" />
                    </label>
                    <div class="comment">
                        <input type="text" id="bmw" placeholder="Beemer" />
                    </div>
                </div>
                <input id="button" type="submit" name="submit" value="Submit">
            </form>
        </div>
    </body>
</html>

Answer 1

您的代码在加载DOM之前执行。您需要在HTML之后移动代码或使用$(document).ready()来确保代码不会过早运行。

所以，当这样的代码运行时：

$('.car').click(function() {...});

DOM中还没有.car对象，因此无法安装事件处理程序。

您可以这样做：

$(document).ready(function() {
    $('.car').click(function() {...});
});

或者，您可以将<script>标记移到</body>标记之前，以便在脚本运行之前已经加载了DOM元素：

<body>
  ... various HTML
<script>
    $('.car').click(function() {...});
</script>
</body>

仅供参考，jsFiddle的默认设置是在加载DOM之前不运行代码，这不是您的代码在真实网页中的方式 - 因此有时真正的网页和jsFiddle之间存在差异。可以通过左上角的下拉菜单设置jsFiddle，以控制Javascript何时运行。

Answer 2

将javascript代码插入window.onload或$(document).ready()，以便只在网页完全加载后才能开始执行代码。

将所有JS代码放入doStuff（）;

window.onload = doStuff;
function doStuff() {
    ...
}

或

$(document).ready(doStuff);

}）;

如果这不起作用，请尝试更新浏览器。

是不是使用CSS的外部样式表导致我的代码不执行？

2 个答案: