按下按钮后为div onclick着色

Question

我有以下内容：

$(function() {
  var b = $("#btn");
  var a = $(".a");
  var c = $(".c");
  var e = $(".e");
  var g = $(".g");

  b.click(function() {
    a.click(function() {
      var cls = this.className;
      var clss = cls.slice(-1);

      switch (clss) {
        case "c":
          $(this).css({
            "background-color": "red"
          });
          break;
        case "e":
          $(this).css({
            "background-color": "green"
          });
          break;
        case "g":
          $(this).css({
            "background-color": "blue"
          });
          break;
      }
    });
  });
});

.a {
  background-color: yellow;
  border: 1px black solid;
}

<div class="a c">1</div>
<div class="a c">2</div>
<div class="a e">3</div>
<div class="a e">4</div>
<div class="a g">5</div>
<div class="a g">6</div>
<input type="button" value="button" id="btn">

此代码假设执行以下操作：单击 .a 时，单击 #btn 后，它应该获取第二个变量和颜色：

.c 到红色
.e 到绿色
.g 到蓝色

但这根本没有发生。请帮助我理解并解决我的代码。

谢谢。

Answer 1

它按预期工作，唯一的问题是您的代码段中缺少 jQuery 库

$(function() {
  var b = $("#btn");
  var a = $(".a");

  function color() {

  }
  b.click(function() {
    a.click(function() {
      var cls = this.className;
      var clss = cls.slice(-1);

      switch (clss) {
        case "c":
          $(this).css({
            "background-color": "red"
          });
          break;
        case "e":
          $(this).css({
            "background-color": "green"
          });
          break;
        case "g":
          $(this).css({
            "background-color": "blue"
          });
          break;
      }
    });
  });
});

.a {
  background-color: yellow;
  border: 1px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="a c">1</div>
<div class="a c">2</div>
<div class="a e">3</div>
<div class="a e">4</div>
<div class="a g">5</div>
<div class="a g">6</div>
<input type="button" value="button" id="btn">

按下按钮后为div onclick着色

coloring divs onclick after button pressed

javascript

jquery

onclick