按下按钮后显示divs onclick

Question

我有以下内容：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此代码假设执行以下操作： 单击.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">