javascript - jQuery 点击只发生一次

标签 javascript jquery html css

我正在创建一个随机报价生成器。每次单击“获取报价”按钮时,都应从 API 生成新报价,并且背景颜色会更改。然而,虽然我每次点击时背景颜色都会改变,但报价只会在我第一次点击按钮时改变。

我的HTML如下:

<body>
<div class="container-fluid">
  <div id="centerThis" style="background: transparent">
    <div id=target1>
      <h1 class="text-center">Random Quote:</h1>
      <div class="quote">
        <blockquote>
          <p id="quoteT">Humans are allergic to change. They love to say, 'We've always done it this way.' I try to fight that. That's why I have a clock on my wall that runs counter-clockwise.</p>
          <footer id="quoteA">Grace Hopper</footer>
      </blockquote>
      </div>
      <div class="row">
        <div class="col-xs-2">
          <a href="https://twitter.com/?lang=en" target='_blank'><button onclick="tweetIt()" class="btn myButton colorButton"><i class="fa fa-twitter" aria-hidden="true"></i></button></a>
        </div>
        <div class="col-xs-2">
          <a href="https://www.tumblr.com/dashboard" target='_blank'><button onclick="tweetIt()" class="btn myButton colorButton"><i class="fa fa-tumblr" aria-hidden="true"></i></button></a>
        </div>
        <div class="col-xs-4">
        </div>
        <div class="col-xs-4">
          <button id = "getQuote" class = "btn colorButton">
        Get Quote
      </button>
        </div>
      </div>
    </div>
    <div id="target2">
      <h5 id="byAnna" class="text-center">by <a href="http://codepen.io/annajolly/" target="_blank">anna</a></h5>
    </div>
  </div>
</div>
</body>

我的 jQuery 看起来像这样(我省略了 randColor 的代码和其他一些不重要的部分):

$(document).ready(function() {
  $("#target1").css("color",randColor);
  $("#target2").css("background", randColor);
  $("body").css("background", randColor);
  $(".colorButton").css("background", randColor);
  $("#getQuote").on("click", function(){
    randColor = getRandomColor();
    $("#target1").css("color",randColor);
    $("#target2").css("background", randColor);
    $("body").css("background", randColor);
    $(".colorButton").css("background", randColor);
    $.ajax({url: "http://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", success: function(result){
            $(".quote").html("<blockquote><p>" + result.quoteText + "</p><footer>" + result.quoteAuthor + "</footer></blockquote>");
        }});
    });
});

感谢您的帮助!

最佳答案

您的网址似乎有误:

http://crossorigin.me/ <强> http://api.forismatic ...

每次单击按钮时,您是否在网络检查器上看到 Ajax 请求?

问候,

吉米

编辑:

问题是文本颜色: 和bg一样。

尝试在 JS 中添加这一行:

$(".quote").css("颜色", "黑色");

关于javascript - jQuery 点击只发生一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39728721/

相关文章:

javascript - 将 Canvas base64 图像上传到 parse.com 时图像链接损坏

javascript - 仅在 Mobile View Bootstrap 3 上折叠

javascript - 了解reactjs中的状态?

javascript - 如何显示和隐藏元素,使用 JavaScript(不是 jQuery)将值从 JavaScript 传递到 html 元素?

jquery - 如何启用 Highcharts 滚动条?

javascript - 如何在单击按钮后突出显示动态添加的 UL Li 元素 3-5 秒

javascript - 使用 MapBox 键进行 OSMBuilding

javascript - 读取 javascript 脚本,为什么有这么多 $(美元符号)?

html - 在半透明区域添加 3 个不同的按钮

javascript - 树结构的多个javascript切换