个人中心
gpt4 book ai didi

javascript - 加载页面时如何从按钮执行功能

转载 作者：太空宇宙 更新时间：2023-11-04 01:52:17 25 4
gpt4 key购买 nike

我的问题是我有一个按钮，我创建了当你点击按钮时执行的东西，但现在我需要它，当我加载页面时，这些东西就像我按下按钮一样执行。

我有一个非常简单的页面，每次我点击“新报价”按钮时，它都会显示一条新报价，我的问题是当我加载页面时，显示的报价不是来自 jquery，而是来自HTML 之一。如果我得到了我想要的，应该显示一个新的引用而不是来自 HTML 的默认引用。

我尝试创建一个像 randomQuote () { stuff } 这样的通用函数，然后执行此操作 $("#getMessage").on("click", randomQuote());

但是没有成功，我是JS新手!我希望你们能帮忙!非常感谢。

$(document).ready(function() {

    var url = ('https://api.myjson.com/bins/gi3r7');

    function pastelColor() { // LBH QVQ VG!
        var newArr = '';
        for (var i = 0; i < 6; i++) {
            var random = Math.floor((Math.random() * 10) + 1);
            newArr += String.fromCharCode((random % 5) + 65);
        }
        return newArr;
    }

    $("#getMessage").on("click", function(ev) {
        $("body").css("background-color", '#' + pastelColor());
        // $("body").css("background-color", '#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1));
        $.getJSON(url, function(json) {
            var html = "";
            var random = Math.floor((Math.random() * Object.keys(json).length) + 1);
           
            while (json[random].quote.length > 150) {
                random = Math.floor((Math.random() * Object.keys(json).length) + 1);
            }

            html += "<h2>" + json[random].quote + "</h2>";
            html += "<footer>" + json[random].author + " in <cite>" + json[random].source + "</cite></footer><br>";

            // Thanks to chris-francis from Stackoverflow for providing the solution below!
            // http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents

            ev.preventDefault();
            $('#tweetBtn iframe').remove();
            var tweetBtn = $('<a></a>')
                .addClass('twitter-share-button')
                .attr('data-size', 'large')
                .attr('data-hashtags', 'freecodecamp')
                .attr('href', 'http://twitter.com/share')
                .attr('data-text', json[random].quote + " by " + json[random].author);
            $('#tweetBtn').append(tweetBtn);
            twttr.widgets.load();

            $(".quote").html(html);
        });
    });
});
body {
    background: orange;
}

.block {
    left: 30%;
    width: 40%;
    height: 35%;
    top: 30%;
    position: absolute;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Random Quotes</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->
</head>

<body>
    <div class="container-fluid">
  <div class="block">
    <div class="quote">
      <h2>"All we have to decide is what to do with the time that is given to us."</h2>
      <footer>Gandalf in
        <cite title="Source Title">The Lord of the Rings</cite>
      </footer>
      <br>
    </div>
    <div class="row">
      <button type="button" id="getMessage" class="btn btn-primary twitter-share-button">New Quote</button>
    </div>
    <div id="tweetBtn">
      <br>
      <a class="twitter-share-button" href="http://twitter.com/share" data-size="large" data-text="'All we have to decide is what to do with the time that is given to us.'" data-hashtags="freecodecamp" data-show-count="false">Share</a>
      <script>
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
      </script>
    </div>
  </div>


</div>
</body>


</html>

最佳答案

你做到了

$("#getMessage").on("click", randomQuote());

randomQuote() 调用函数。像这样做 randomQuote

$("#getMessage").on("click", randomQuote);

它应该可以正常工作。

JSFiddle

关于javascript - 加载页面时如何从按钮执行功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43240912/

25 4 0
文章推荐： python - Docker:执行 Python 脚本
文章推荐： c++ - 有没有办法在 Mac 上为 OpenCL 启用双 vector ？
文章推荐： javascript - 如何为 Atom、WhatsApp 等 Electron 应用程序添加安装屏幕？
文章推荐： c - 如何反转 C 文件中的文本？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com