javascript - jQuery 点击只发生一次-6ren

javascript - jQuery 点击只发生一次

转载作者：行者123 更新时间：2023-11-28 05:08:00

25

4

我正在创建一个随机报价生成器。每次单击“获取报价”按钮时，都应从 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/

25

4

0

文章推荐： javascript - 如何等待表单onsubmit上的异步操作

文章推荐： html - 将带渐变的元素背景色更改为不带渐变的背景色

文章推荐： html - 将菜单置于带有自定义主题的标题中

文章推荐： javascript - 图标旁边没有换行的文字

发生 VBA 编译错误
下面的代码旨在在首次打开工作簿时运行。 Sub Auto_Open() Dim LastRow As Integer LastRow = Sheet6.UsedRange.Rows.Count Act
发生 C++ 堆损坏检测错误
当我尝试操作我的代码时，除了弹出调试错误外，它执行得很好。错误信息在这里。我的完整代码在这里。 #include using namespace std; class String { publi
c# - 发生 XMLParseException
The invocation of the constructor on type 'WpfApplication1.MainWindow' that matches the specified bi
android - 发生 ArrayIndexOutOfBoundsException
我正在使用 BaseAdapter: public class MyAdapter extends BaseAdapter{ private final LayoutInflater mInflate
mysql - 发生 ER_PARSE_ERROR
我想做网页抓取。我写了代码 var connection = require('./mysqlConnection'); var c = new Crawler({ maxConnections
发生 Java 堆空间错误
我的系统中发生 Java 堆空间错误。我尝试了很多来自 Stack Overflow 的解决方案，但没有任何效果。当我工作时当按下 OK 然后 (我的项目没有错误) 我的 eclipse.ini 是
c++ - D3DXERR_INVALIDDATA 发生
环境: i5 750 DDR3 4GWin7 专业版 x64 sp1 DXSDK 9.0c 2010 年 6 月 GeForce GT240(驱动程序 275.33)512MB MSVC 2008 s
发生 Python 套接字错误
这段代码是我写的。 import socket host = 'localhost' port = 3794 s = socket.socket(socket.AF_INET, socket.SOCK
c# - 发生 DateTimeInvalidLocalFormat
我正在尝试引用 UTC 时间间隔获取本地日期时间，我正在执行下面的代码。 var dtString =DateTime.UtcNow.ToString(@"yyyy-MM-ddTHH\:mm\:ss
c# - LoadFromContext 发生
我有一个非常简单的 C# 问题，它从库中加载 Windows WPF 窗口。这是代码: public partial class App : Application { public App(
android - 发生 fragment 加载闪烁时带有导航组件的底部导航
我目前正在使用带有导航组件的底部导航，它工作正常但是当我们点击导航项 fragment 正在加载然后闪烁正在发生，即使当前选择的项目也会发生闪烁。它在加载 fragment 时发生。我的应用程序屏幕背
nullpointerexception - Kotlin NullPointerException 发生
我是新来的 kotlin , 当我开始 Null Safety 时，我对下面的情况感到困惑. There's some data inconsistency with regard to initia
css - 发生 css 转换时如何阻止我的文本移动
我有一个框，其中包含同时发生的两个独立的 css 转换。当转换发生时，图标下方的标题和段落文本移动位置参见 JS Fiddle:http://jsfiddle.net/Lsnbpt8r/ 这是我的
cordova - 发生 native 打包程序异常
在为黑莓 10 构建电话间隙应用程序时，我遇到了异常情况。 [BUILD] Populating application source [BUILD] Parsing config.xml [
java - 发生 JNI 代码错误时如何正确停止线程？
这个问题在这里已经有了答案: How to properly stop the Thread in Java? (8 个回答) 3年前关闭。我看过How to properly stop the T
发生 fatal error 时php重新加载页面
我试图弄清楚发生 fatal error 时如何刷新页面。基本上我正在访问图像 api 并将图像复制到我的服务器。我还每次都创建照片的缩略图版本。我会每隔一段时间收到一条错误消息，指出我的脚本试图分配
java - 使用断言检查元素是否在屏幕上，发生 NoSuchElementException
我正在尝试使用断言函数检查元素是否在屏幕上。我在我的测试应用程序 (AndroidDriver) 中使用 Appium 和 Java。我期望的是，如果元素在屏幕上，则返回 1；如果不在屏幕上，则返回
java - 发生 MaxUploadSizeExceededException 时如何关闭套接字？
我正在开发图像上传系统。我使用 CommonsMultipartResolver 设置 maxUploadSize。当我尝试上传超过最大尺寸的图像文件时，会发生 MaxUploadSizeExcced
java - 发生 UnsatisfiedDependencyException 错误
我有以下代码和@ComponentScan(basePackages = "com.project.shopping")，包结构为 com.project.shopping.Controller co
java - 发生 JNI 错误
我尝试运行此程序作为测试，但收到错误“发生了 JNI 错误，请检查您的安装并重试”，然后是“发生了 Java 异常”。关于如何解决这个问题有什么想法吗？ package java; public cl

首页

博学

6Ren·AI

商城

javascript - jQuery 点击只发生一次