Javascript 不使用CSS的外部样式表是否导致我的代码无法执行？_Javascript_Jquery_Html_Css

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

javascript jquery html css

Javascript 不使用CSS的外部样式表是否导致我的代码无法执行？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,您看到的代码是由一位堆栈溢出用户提供给我的，他的JSFIDLE可以在中找到。他的代码在JSFIDLE中运行良好。我把他的代码复制粘贴到我的文本板上，保存在XAMPP的htdocs文件夹中，并尝试运行它我发现当我把光标放在汽车的图标上时，图标会放大（就像它应该放大的那样），但我不会看到图标下面出现文本框。这就是我的网页的全部想法，将鼠标放在图像上，出现一个文本框，然后用户将他的评论插入框中。当我问Stack Overflow用户为什么没有出现文本框时，一位女士亲切地指出我缺少jQuery库链接，

您看到的代码是由一位堆栈溢出用户提供给我的，他的JSFIDLE可以在中找到。他的代码在JSFIDLE中运行良好。我把他的代码复制粘贴到我的文本板上，保存在XAMPP的htdocs文件夹中，并尝试运行它

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

我已经检查并重新检查了代码的布局（JavaScript和jQuery链接放在head标记中，CSS代码放在style标记中），似乎没有任何错误，但代码仍然没有运行。由于没有一个脚本是服务器端的，我决定不使用XAMPP，只是将脚本保存在“我的文档”中并在浏览器上运行，但没有任何更改。有人能告诉我我做错了什么吗？如果代码在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>


$（'.car'）。单击（函数（）{
$（'.comment'）.css（“可见性”、“隐藏”）；
$（“#按钮”）.css（“可见性”、“隐藏”）；
var id=$（this.children（'label'）.attr（'for'）；
var按钮偏移；
开关（id）{
“mercedesbenz”案：
按钮偏移量='0'；
打破
“波切”一案：
按钮偏移量='33%'；
打破
案例“宝马”：
按钮偏移量='66%'；
打破
}
$（this）.children（'.comment'）.css（“可见性”、“可见”）；
$（“#按钮”）.css（“左”，按钮偏移）；
$（“#按钮”）.css（“可见性”、“可见”）；
});
$（'.comment'）.mouseleave（函数（）{
setTimeout（函数（）{
$（'.comment'）.css（“可见性”、“隐藏”）；
$（“#按钮”）.css（“可见性”、“隐藏”）；
}, 500);
});
#形式{
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：50%；
保证金权利：-50%；
转换：转换（-50%，-50%）
}
.汽车{
浮动：左；
利润率：2%2%5%2%；
}
.汽车标签img{
变换：比例（0.8）；
过渡时间：0.2s；
}
.汽车标签img：悬停{
光标：指针；
变换：比例（1）；
}
.评论{
位置：绝对位置；
可见性：隐藏；
}
.评论输入{
宽度：128px；
字号：1em；
}
.汽车标签img{
宽度：128px；
显示：块；
}
#钮扣{
位置：相对位置；
左：66%；
利润率：2%；
可见性：隐藏；
}

在加载DOM之前，您的代码正在执行。您需要在HTML之后移动代码，或者使用

$（document）.ready（）

确保代码不会过早运行

因此，当这样的代码运行时：

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

DOM中还没有

.car

对象，因此无法安装事件处理程序

您可以这样做：

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

或者，您可以像这样将

标记移动到

标记之前，以便在脚本运行之前已经加载DOM元素：

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


... 各种HTML
$（'.car'）。单击（函数（）{…}）；

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

您的代码在加载DOM之前执行。您需要在HTML之后移动代码，或者使用

$（document）.ready（）