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

I'm working on what should be a rather simple thing, I want to click on the #new-quote button and have it's color change to a different color using jquery. The plan is to eventually have every non whitespace part of the webpage change to the same color on click. However I seem unable to get the simple task of changing one thing. I think the javascript is written correctly although maybe I made a mistake. I'm honestly just not sure why the button doesn't turn blue.

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

<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>
<script src="resources/js/script.js"></script>
</body>


$(document).ready(function(){

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

/* NEW QUOTE BUTTON */

$("#new-quote").click(function(){
   document.getElementById("#new-quote").style.backgroundColor = "blue";
});  

};

Thank you to everyone I reworked my js file after reading the answers and now the code works beautifully

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

$(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]);


});  

});

4 个解决方案

#1

Here's a working sample based on your example. A few things note:

这是基于您的示例的工作示例。注意事项:

document.getElementById() accepts an id without a #

document.getElementById()接受没有#的id

since you're using jQuery, you could replace that with $("#new-quote").css({backgroundColor: "blue"});
- see http://api.jquery.com/jQuery/#jQuery1 and http://api.jquery.com/css/#css-properties

因为你正在使用jQuery,你可以用$(“#new-quote”)替换它.css({backgroundColor:“blue”});见http://api.jquery.com/jQuery/#jQuery1和http://api.jquery.com/css/#css-properties

$(document).ready(function() {

  /* NEW QUOTE BUTTON */

  $("#new-quote").click(function() {
    document.getElementById("new-quote").style.backgroundColor = "blue";
  });

});

<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>

#2

The getElementById is a standard javascript function and receives the object id without the # selector. If you are using JQuery you should stick to it and take advantage of $(this) to select the button inside the click function.

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

#3

i) document.getElementByID is javascript, since you are using jquery you can do $(this).css('background-color', 'blue');. $(this) here refers to the element being clicked here.

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

ii) Since you would like to change the colors randomly, i have a list of colors in an array. and using math.random() we can get random number , to apply different colors.

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

You could try the below code, which lets u apply random color to the button on every click

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

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

#4

Try this:

    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);
    });

<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>

#1