Question

我是JS的新手。我在这里重新创建了我想要的JSFiddle：https://jsfiddle.net/t5fq5zjj/

基本上，它在jsF中工作正常，但是当我将其应用到我的代码中时，它不起作用。当我点击.card1（或其他）时，它不会发生任何事情。所以我想问一下，我有这个吗？

<head>
    ...
    <!-- js -->
    <script src="js/jquery-2.1.4.min.js"></script>
    ...
    <script>
        $(function () {
            $(".icon_card1").click(function () {
        $(".card1bg").css('opacity', '1');
            });
        });
    </script>
</head>
<body>
    ...
    <div class="content">
        <div class="card1">
            <div class="image_card1"></div>
            <div class="icon_card1"><img src="img/arrow.png"></div>
        </div>
    </div>
    ...
    <div class="card1bg">
        <video autoplay  poster="img/background.png" id="bgvid" loop>
            <source src="img/background.mp4" type="video/mp4">
        </video>
    </div>
    ...
</body>

它不在我的代码中工作，但它在jsFiddle中。谢谢你的时间。

编辑：我已将所有代码加载到我的托管中，因此您可以在此处查看：http://hdesign.comehere.cz/

Answer 1

将JavaScript代码包装在文档就绪函数中。

$( document ).ready(function() {
    $(".card1").click(function () {
        $(".card1_content").css('background', 'red');
    });

    $(".card2").click(function () {
        $(".card1_content").css('background', 'aqua');
    });
});

Answer 2

我尝试在您指定的hosting上测试您的项目，但我发现jquery文件无法正确加载（错误404）。尝试检查您的jquery文件路径和文件位置

OnClick功能无法在我的网站

2 个答案: