JQuery 无法正确选择

JQuery doesn't select properly

本文关键字：选择 JQuery      更新时间：2023-09-26

我正在尝试使用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>

你的代码有很多问题，所以我一次拿一个

：

  1. 您的一个函数包含应在 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 的行之后。

  1. 你的每一个 setAttribute 调用都是错误的。你有：

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

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

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

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

 background:color;

这是不正确的。

  1. 您正在使用jQuery，因此请在所有使您的工作更轻松的地方使用它。 而不是重复的：

     document.getElementById
 and setAttribute

只需使用：

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

  1. 当然，正如其他人所说，除非你从代码中引用库，否则你不能使用 jQuery，所以请确保你有这个：

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

在网页的head部分。

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

使用 $（）

或 jquery（） 方法时，始终在代码之前包含 JQUERY 库，否则使用纯 JavaScript。

在调用任何自定义代码之前包含 jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

尝试使用 .on("click", function(){}); 而不是 .click(function(){});

.on("click", function(){});将处理动态添加的内容，而.click(function(){});将仅适用于已经存在的元素

使用 .on("click", function(){}); 将确保函数运行，即使在运行该行代码时该元素不存在也是如此。

相关文章：