jquery 点击无反应，请问哪里出错了？

26612040

发布于
2017-08-29

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>随机名言</title>
    <link rel="stylesheet" href="index.css">
    <script>
    $(document).ready(function() {
        $(".btn-new").on("click", function() {
            $(".quote").html("Here is the message");
        });
    });
    </script>
</head>

<body>
    <main class="qtbox">
        <section class="qtbox-change">
            <q class="quote">
                Soylent Green is people! Soylent Green is people! Soylent Green is people! Soylent Green is people!
            </q>
            <p class="author">-- 陈思</p>
        </section>
        <section class="qtbox-btngroup">
            <button class="btn btn-qq"></button>
            <button class="btn btn-weibo"></button>
            <button class="btn btn-new">New quote</button>
        </section>
    </main>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
    </script>
</body>

</html>

css

html {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    display: flex;
    justify-content: center;
    background-color: #000;
}

.qtbox {
    width: 600px;
    height: 130px;
    padding: 25px 50px;
    background-color: #fff;
    border-radius: 2.5%;
}

.author {
    text-align: right;
}


.qtbox-btngroup {
    position: relative;
}

.qtbox-btngroup {
    width: 83%;
    margin-left: 8.5%;
    margin-right: 8.5%;
}

.qtbox-btngroup .btn {
    font-size: 16px;
    color: #fff;
    background-color: #000;
    height: 38px;
    border: 0;
    cursor: pointer;
    transition: background-color 1s ease-in;
}

.qtbox-btngroup .btn:focus {
    outline: none;
}

.qtbox-btngroup .btn:hover {
    opacity: 0.7;
}

.qtbox-btngroup .btn-new {
    font-family: Arial, Verdana, Sans-serif;
    position: absolute;
    right: 0;
    border-radius: 3px;
}

.qtbox-btngroup .btn-weibo,
.qtbox-btngroup .btn-qq {
    width: 40px;
    border-radius: 100%;
}

.qtbox-btngroup .btn-qq {
    background: url("images/index-qq.png") center center no-repeat #000;
}

.qtbox-btngroup .btn-weibo {
    background: url("images/index-weibo.png") center center no-repeat #000;
}

javascript

html5 jquery

阅读 5.5k

9 个回答

得票最新

IMSKK

1733

发布于
2017-08-29

请把头部的script标签移到jquery后面

艾特老干部

5k1912

发布于
2017-08-29

    <script>
    $(document).ready(function() {
        $(".btn-new").on("click", function() {
            $(".quote").html("Here is the message");
        });
    });
    </script>

这段放在加载jQuery的<script>的后面，不然你的jQuery都没加载进来，怎么能使用它的方法呢

Captain

2.9k42133

发布于
2017-08-29

更新于
2017-08-29

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>随机名言</title>
    
</head>

<body>
    <main class="qtbox">
        <section class="qtbox-change">
            <q class="quote">
                Soylent Green is people! Soylent Green is people! Soylent Green is people! Soylent Green is people!
            </q>
            <p class="author">-- 陈思</p>
        </section>
        <section class="qtbox-btngroup">
            <button class="btn btn-qq"></button>
            <button class="btn btn-weibo"></button>
            <button class="btn btn-new">New quote</button>
        </section>
    </main>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
    </script>
    <script>
        $(document).ready(function() {
            $(".btn-new").on("click", function() {
                $(".quote").html("Here is the message");
            });
        });
        </script>
</body>

</html>

顺序错了 jq引入放太下面了要先引入jq再写你的业务代码

MrIsaac

3242

发布于
2017-08-29

你要先加载jQuery，然后再使用jQuery，才有效果

解决方案：

// 先加载jQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
    </script>
 // 再使用
<script>
    $(document).ready(function() {
        $(".btn-new").on("click", function() {
            $(".quote").html("Here is the message");
        });
    });
    </script>

落地的飞机

136315

发布于
2017-08-29

更新于
2017-08-29

F12打开控制条看什么错误，如果是表示获取元素未定义，那么大概率是因为页面元素未加载完造成的。jq可以改成window.onload这个是加载完所有元素后才运行。不是jq文件放不放后面的问题，我JQ不知道，反正JS我从来都是放最后