Question

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

Answer 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的行之后。

您的每个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/

Answer 2

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

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

Answer 3

使用 $（）或 jquery（）方法时，请始终在代码前加入 JQUERY库，否则请使用纯javascript。

Answer 4

尝试使用.on("click", function(){});代替.click(function(){});

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

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

JQuery没有正确选择

4 个答案: