Question

我正在研究一个应该是一个相当简单的事情，我想点击#new-quote按钮并使用jquery将颜色更改为不同的颜色。计划是最终让网页的每个非空白部分在点击时变为相同的颜色。但是我似乎无法完成改变一件事的简单任务。我认为javascript写得正确，虽然我可能犯了一个错误。老实说，我不确定为什么按钮不会变蓝。

$(document).ready(function(){

/* QUOTE ARRAY */
var array = ["a","b","c","d","e","f","g","h","i","j"];

/* NEW QUOTE BUTTON */

var colors = ['red', 'green', 'blue', 'orange','black','blueviolet', 'brown', 'aqua', 'burlywood', 'coral', 'cyan', 'darkred', 'forestgreen', 'mediumvioletred', 'olivedrab', 'teal', 'yellowgreen'];

$("#new-quote").click(function(){

var rand = Math.floor(Math.random()*colors.length);
$(this).css('background-color', colors[rand]);
$("#quote").css('color', colors[rand]);
$(".author").css('color', colors[rand]);
$(".twtter-button-icon").css('background-color', colors[rand]);
$("#twitter-button").css('background-color', colors[rand]);
$("body").css('background-color', colors[rand]);


});  

});

感谢大家在阅读答案后重新编写了我的js文件，现在代码工作得非常漂亮

{{1}}

Answer 1

试试这个：

＆＃13;

    var colors = ['blue', 'red', '#0F0', 'rgb(123,45,67)'];
    $("#new-quote").click(function() {
      // Pick a random color
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      // Set the background-color of the currently clicked element
      $(this).css('background-color', randomColor);
    });

＆＃13;

<body>
  <section class="quote-box row">
    <div class="row">
      <h2 id="quote"><i class="ion-quote quotes-icon"></i>Words have meanings! Or so people tell me I'm not sure!</h2>
    </div>
    <div class="row">
      <h4 class="author">- Zack Fanning</h4>
    </div>
    <div class="row buttons">
      <button id="twitter-button"><a href="https://twitter.com/intent/tweet"><i class="ion-social-twitter twtter-button-icon"></i></a>
      </button>
      <button id="new-quote">New quote</button>
    </div>
  </section>
  <section class="created-by row">
    <h4>By Zack Fanning</h4>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>

＆＃13;

Answer 2

getElementById是一个标准的javascript函数，它接收没有＃选择器的对象id。如果您正在使用JQuery，您应该坚持使用它并利用$（this）来选择click函数中的按钮。

Answer 3

以下是基于您的示例的工作示例。注意事项：

document.getElementById()接受没有#
因为您正在使用jQuery，所以可以将其替换为$("#new-quote").css({backgroundColor: "blue"});
- 请参阅http://api.jquery.com/jQuery/#jQuery1和http://api.jquery.com/css/#css-properties

＆＃13;

$(document).ready(function() {

  /* NEW QUOTE BUTTON */

  $("#new-quote").click(function() {
    document.getElementById("new-quote").style.backgroundColor = "blue";
  });

});

＆＃13;

<body>
  <section class="quote-box row">
    <div class="row">
      <h2 id="quote"><i class="ion-quote quotes-icon"></i>Words have meanings! Or so people tell me I'm not sure!</h2>
    </div>
    <div class="row">
      <h4 class="author">- Zack Fanning</h4>
    </div>
    <div class="row buttons">
      <button id="twitter-button"><a href="https://twitter.com/intent/tweet"><i class="ion-social-twitter twtter-button-icon"></i></a>
      </button>
      <button id="new-quote">New quote</button>
    </div>
  </section>
  <section class="created-by row">
    <h4>By Zack Fanning</h4>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>

＆＃13;

Answer 4

i）document.getElementByID是javascript，因为你使用的是jquery，你可以$(this).css('background-color', 'blue');。 $(this)此处指的是此处点击的元素。

ii）由于你想随机改变颜色，我有一个数组的颜色列表。并使用math.random()我们可以得到随机数，以应用不同的颜色。

您可以尝试使用以下代码，这样您就可以在每次点击时将随机颜色应用于按钮

<强>使用Javascript：

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];

$("#new-quote").click(function(){
   // Set the background-color of the currently clicked element
   var rand = Math.floor(Math.random()*colors.length); 
   $(this).css('background-color', colors[rand]);
});

DEMO

使用jquery单击以更改背景颜色

4 个答案: