jQuery单击仅发生一次

Question

I am creating a random quote generator. 我正在创建一个随机报价生成器。 Every time I click the button "Get Quote", a new quote should be generated from an API, and the background color is changed. 每次我单击“获取报价”按钮时，都应该从API生成一个新的报价，并且背景颜色也会更改。 However, while the background color changes every time I click, the quote only changes the first time I click the button. 但是，虽然每次单击时背景颜色都会更改，但是引号仅在我第一次单击按钮时才更改。

My HTML is as follows: 我的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>

My jQuery looks like this (I left out the code for randColor and some other un-important parts): 我的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>");
        }});
    });
});

Thanks for any help! 谢谢你的帮助！

Answer 1

It seems that you have an error on your URL: 您的网址似乎有误：

http://crossorigin.me/ http://api.forismatic ... http://crossorigin.me/ http：//api.forismatic ...

Do you see the Ajax request on the web inspector each time you click on the button? 每次单击按钮时，您是否在Web检查器上看到Ajax请求？

Regards, 问候，

Jimmy 吉米

EDIT : 编辑：

The issue is the text color: It's the same as the bg. 问题是文本颜色：与bg相同。

Try to add this line in JS: 尝试在JS中添加以下行：

$(".quote").css("color", "black"); $（“。quote”）。css（“ color”，“ black”）;

jQuery单击仅发生一次

问题描述

1 个解决方案

解决方案1
0 2016-09-27 15:55:40

jQuery单击仅发生一次

问题描述

1 个解决方案

解决方案1 0 2016-09-27 15:55:40

解决方案1
0 2016-09-27 15:55:40