javascript - JQuery 没有正确选择

我正在尝试使用 JQuery 在我的页面上选择一个按钮并将其隐藏(目前，作为测试)。由于我无法理解的原因，我无法使用 JQuery 选择它，使用警报进行测试也不起作用。抱歉，代码困惑，感谢您的帮助!

片段:

function mainFunction() {

  document.getElementById("quarter1").innerHTML = 'Welcome to Elements of Art, a website project designed to teach about Art elements for Art Week. <p style="text-align:center;margin-top:25%"><button style="display: inline-block;" target="blank" class="mainButton" id="button1">Click to Continue</button></p>';

  $("#button1").click(function() {
    $("#button1").hide();
  });

  document.getElementById("quarter1").setAttribute("style", "background: color;");
  document.getElementById("quarter2").setAttribute("style", "background: color;");
  document.getElementById("quarter3").setAttribute("style", "background: color;");
  document.getElementById("quarter4").setAttribute("style", "background: color;");
}

function setTopRight(color) {
  document.getElementById("quarter3").setAttribute(
    "style", "background: color;");
}

function mainJQ() {
  $(document).ready(function() {
    $("#button1").click(function() {
      $("#button1").hide();
    });
  });
};

#main {
  background: #333333;
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin: 0;
  position: absolute;
  font-family: "Open Sans";
  font-size: 25px;
  text-align: center;
}
#quarter1 {
  background: #006600;
  width: 50%;
  height: 50%;
  margin-right: 50%;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 50vh;
  position: absolute;
}
#quarter2 {
  background: #003399;
  width: 50%;
  height: 50%;
  margin-right: 50%;
  margin-top: 50vh;
  margin-left: 0;
  margin-bottom: 0;
  position: absolute;
}
#quarter3 {
  background: #cc3300;
  width: 50%;
  height: 50%;
  margin-right: 0;
  margin-top: 0;
  margin-left: 50%;
  margin-bottom: 50vh;
  position: absolute;
}
#quarter4 {
  background: #cccc00;
  width: 50%;
  height: 50%;
  margin-right: 0;
  margin-top: 50vh;
  margin-left: 50%;
  margin-bottom: 0;
  position: absolute;
}
body {
  background: #333333;
  margin: 0;
}
.mainButton {
  border-radius: 4px;
  background: transparent;
  border: solid 2px black;
  color: black;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  font-size: 25px;
  font-family: 'Open Sans';
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="mainFunction()">

  <div id="main">
    <!--The top left quarter of the screen-->
    <div id="quarter1">
    </div>
    <!--The bottom left quarter of the screen -->
    <div id="quarter2">
    </div>
    <!--The top right quarter of the screen -->
    <div id="quarter3">
    </div>
    <!--The bottom right quarter of the screen -->
    <div id="quarter4">
    </div>

  </div>
</body>

最佳答案

你的代码有很多问题，所以我一次一个地解决:

您的一个函数包含应该在 DOM 准备就绪时自动运行的代码，但该函数永远不会被调用，并且它不应该首先包装 DOM 就绪函数:

// This function is never called, so its child function can't do its job
// Plus, document.ready shouldn't be encapsulated anyway
function mainJQ() {
  $(document).ready(function() {
    $("#button1").click(function() {
      $("#button1").hide();
    });
  });
};

代码应该是:

   $(document).ready(function() {
     $("#button1").click(function() {
       $("#button1").hide();
     });
   });

或者，更短:

   $(function() {
     $("#button1").click(function() {
       $("#button1").hide();
     });
   });

现在，您在页面的另一个位置确实有这段代码，但嵌套函数永远不会运行。此外，请确保按钮隐藏代码位于首先为按钮创建 HTML 的行之后。

您的每一次 setAttribute 调用都是错误的。你有:

document.getElementById("quarter1").setAttribute("style", "background: color;");

setAttribute 的第二个参数应该是您正在设置的属性的值。例如:

 setAttribute("style", "background-color:yellow");

但是，您正在将 style 属性设置为具有以下值:

 background:color;

这是不正确的。

您正在使用 jQuery，因此请在所有可以使您的工作更轻松的地方使用它。而不是重复:
```
 document.getElementById
 and setAttribute
```

只需使用:

 $("#ElementId").css("background-color", "SomeColor");

当然，正如其他人所说，除非您从代码中引用该库，否则您不能使用 jQuery，因此请确保您拥有:
```
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
```

在网页的 head 部分。

我已经清理了您的代码，现在按钮的消失行为可以正常工作了。请参阅:https://jsfiddle.net/1z3x20aa/29/

关于javascript - JQuery 没有正确选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35931061/

javascript - JQuery 没有正确选择

上一篇：html - 从自定义样式 radio 中删除 "border"

下一篇：css - 要查找字体名称？最接近的比赛？