Question

在下面的代码中，当我点击交换按钮时，如何让我的红色div改变背景颜色以在红色和绿色之间切换？

＆＃13;

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

＆＃13;

/* 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;

}

＆＃13;

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

＆＃13;

Answer 1

你在点击交换时切换了一个“绿色”类，如果你像这样添加一个绿色的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 个答案: