单击交换按钮时，如何使红色div更改背景颜色以在红色和绿色之间切换？

Question

In the following code, how do I get my red div to change background color to toggle between red and green when I click on the swap button? 在以下代码中，当我单击交换按钮时，如何使我的红色div更改背景颜色以在红色和绿色之间切换？

 $(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready'); $("#create").on('click', createNewDiv); // $(".color-div").on('click', '.delete', deleteDiv); } function createNewDiv() { console.log('inside createNewDiv'); var $div = $("<div class = 'color-div'>" + "<p>" + numberOfClicks++ +"</p>" + "</div>"); var $button1 = $('<button class = delete>Delete</button>'); var $button2 = $('<button class = swap>Swap</button>'); $('#container').append($div); $($div).append($button1); $($div).append($button2); //this is the event listener for the delete button $('.delete').on('click', function() { console.log('inside delete button'); $(this).parent().remove(); }); $('.swap').on('click', function() { console.log('inside swap button'); $(this).parent().toggleClass("green"); }); } function deleteDiv() { console.log('delete button pressed'); }

 /* CSS Stylesheet */ /* ---------- DO NOT MODIFY THIS FILE ---------- */ body { font-family: sans-serif; } .color-div{ height:5em; width:100%; background-color: red; display: block; margin-bottom: 1em; }

 <!DOCTYPE html> <!-- DO NOT MODIFY THIS FILE --> <html> <head> <meta charset="utf-8"> <title>First Code Challenge</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="script.js" charset="utf-8"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>My First Code Challenge</h1> </header> <main> <h1>Main Content Heading</h1> <button id="create">CREATE BUTTON</button> <div id="container"></div> </main> </body> </html>

Answer 1

You're toggling a class "green" on click of swap, if you add a CSS class for green like so, it should work: 您要在单击交换时切换“绿色”类，如果您像这样为绿色添加CSS类，它应该可以工作：

 $(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready'); $("#create").on('click', createNewDiv); // $(".color-div").on('click', '.delete', deleteDiv); } function createNewDiv() { console.log('inside createNewDiv'); var $div = $("<div class = 'color-div'>" + "<p>" + numberOfClicks++ + "</p>" + "</div>"); var $button1 = $('<button class = delete>Delete</button>'); var $button2 = $('<button class = swap>Swap</button>'); $('#container').append($div); $($div).append($button1); $($div).append($button2); //this is the event listener for the delete button $('.delete').on('click', function() { console.log('inside delete button'); $(this).parent().remove(); }); $('.swap').on('click', function() { console.log('inside swap button'); $(this).parent().toggleClass("green"); }); } function deleteDiv() { console.log('delete button pressed'); }

 /* CSS Stylesheet */ /* ---------- DO NOT MODIFY THIS FILE ---------- */ body { font-family: sans-serif; } .color-div { height: 5em; width: 100%; background-color: red; display: block; margin-bottom: 1em; } .green { background-color: green; }

 <!DOCTYPE html> <!-- DO NOT MODIFY THIS FILE --> <html> <head> <meta charset="utf-8"> <title>First Code Challenge</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="script.js" charset="utf-8"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>My First Code Challenge</h1> </header> <main> <h1>Main Content Heading</h1> <button id="create">CREATE BUTTON</button> <div id="container"></div> </main> </body> </html>

单击交换按钮时，如何使红色div更改背景颜色以在红色和绿色之间切换？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-22 19:51:41

单击交换按钮时，如何使红色div更改背景颜色以在红色和绿色之间切换？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-22 19:51:41

解决方案1
0 已采纳 2017-05-22 19:51:41