Question

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

我有一个非常简单的页面，每次我点击一个按钮“新报价”，它会显示一个新的报价，我的问题是，当我加载页面时，显示的报价不是来自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>

Answer 1

你做了

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

randomQuote（）调用该函数。就像这样做randomQuote

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

它应该可以正常工作。

JSFiddle

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

1 个答案: