Question

我正在进行freeCodeCamp Simon Game挑战（JSfiddle）。我无法理解为什么我的.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-->

这是JavaScript：

$("*").click(function(){
  console.log($(this));
  activateSection("red");
});

$("#yellow").click(function(){
  console.log($(this));
  activateSection("yellow");
});

第一次单击功能正常工作，所以我可以确定已安装JQuery并且语法正确。每当我尝试在元素选择器中放置特定的类或id时，都不会发生任何事情。

Answer 1

事实证明，可点击元素的z-index为＆lt; 0，表示它们被<body>和<html>元素有效覆盖。

我已经将z-index设为正值，这是有效的。

Answer 2

我认为问题在于你如何设计你的圆圈样式。我检查你的jsfiddle，并发现你的#red的大小是200ish x 0，这基本上意味着它甚至没有你点击和交互的身体。同时，您的.quarter.red有一个大小，所以可能试图点击它？

解决方案：

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

Answer 3

您的z-index会发生很多事情。它引起了所有问题。我已对您的.quarter .center .main .button-holder进行了更改以使其正确无误。我还更改了红色或黄色类的单击选择器。

根据我的经验，你永远不应该对z-index持消极态度。根据我的经验，很少有充分理由这样做。

这是更新版本： https://jsfiddle.net/44xh92ny/3/

JQuery .click（）没有选择元素

3 个答案: