Javascript JQuery.click（）不选择元素

我正在做freeCodeCamp Simon游戏挑战（）。我不明白为什么我的.click（）根本不起作用。我在其他所有项目中都使用过这个，没有问题

HTML如下所示：

    <span class="title-label">designed and coded by <a href="http://www.daveingles.com" id="linkedIn" target="_blank">Dave Cook</a></span>
      </div>
<div class="main">

  <div class="button-holder">


    <div class="quarter red">
      <div id="red"></div>
    </div>
    <!--quarter red-->
    <div class="quarter yellow">
      <div id="yellow"></div>
    </div>
    <!--quarter red-->
    <div class="quarter green">
      <div id="green"></div>
    </div>
    <!--quarter red-->
    <div class="quarter blue">
      <div id="blue"></div>
    </div>
    <!--quarter red-->
    <div class="center">
      <h1 id="simon">Simon</h1>
      <div class="center-row">
        <div class="center-cell">
          <div class="screen">--</div>
        </div><!--cell-->
        <div class="center-cell">
          <div class="btn r"></div>
          </div><!--cell-->
        <div class="center-cell">
          <div id="strict-light"></div>
        <div class="btn y"></div>
          </div><!--cell-->
        <div class="center-cell">
            <span>COUNT</span>
          </div><!--cell-->
        <div class="center-cell">
       <span> START</span>
          </div><!--cell-->
        <div class="center-cell">
        <span>STRICT</span>
          </div><!--cell-->

      </div><!--center-row-->
      <div class="bottom-row">
        <div class="center-cell">
          <span>OFF</span>
        </div>
        <div class="center-cell">
          <div class="off-on">
            <div id="switch"></div>
          </div>
        </div>
        <div class="center-cell">
          <span>ON</span>
        </div>
      </div><!--bottom-row-->

    </div>
    <!--center-->
  </div>
  <!--button-holder-->
</div>
<!--main-->

---

first click函数工作正常，因此我可以确保安装了JQuery并且语法正确。每当我尝试在元素选择器中放置特定的类或id时，都不会发生任何事情。

我认为问题在于如何设置圆的样式。我检查了你的JSFIDLE，发现你的

#red

的大小是200ish x 0，这基本上意味着它甚至没有一个主体供你点击和交互。同时，你的

.quarter.red

有一个尺寸，所以你可以试着点击它吗

解决方案：

$(".quarter.red").click(function(event) {});

---

事实证明，它将可点击元素的z索引设置为<0，这意味着它们被

和

元素有效覆盖

---

此后，我将z-index设为正值，这起到了作用。

您的

z-index有很多问题。这是你所有问题的根源。
我已对您的
.quarter.center.main.button holder
进行了更改，以确保正确。我还更改了红色或黄色类的单击选择器

你不应该对z-index进行否定，以我的经验来看，很少有好的理由这样做

以下是更新版本：
这可能与在元素上使用z索引有关吗？id为黄色的
div
没有任何维度！我现在已将高度和宽度设置分别更新为100%，但没有任何区别。当右键单击并按“检查元素”时，元素不会自动显示，我最初只能看到
和
部分。我想这是由同一个问题引起的。
$(".quarter.red").click(function(event) {});