Question

对我来说这仍然是个新鲜事。我只需要知道我哪里出错了。我想在单击按钮时更改DIV内的文本。我按照youtube链接（下面），因为它是迄今为止最容易遵循的。但它仍然无法正常工作。

https://www.youtube.com/watch?v=pyfKqrjmAl4&list=PLKOf7m55-0tHTUAeef0nFy4FNlC6DBnz8

这就是我所拥有的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<title>Untitled Document</title>
</head>

<body>

<div id="book">
<h1>Price</h1>

  <div id="main_section">
      <div id="tablef">
          <div id="table">
              <div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
          </div>

       <div id="table2">
           <div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
       </div>
 </div>
</div>
 <div id="button_section">
 <input type="button"id="my_button" value="Click me"/></div>

</div>

</body>

<script type="text/javascript">
$( document ).ready(function() {

$( "#my_button").click(function() {
    $("main_section").html("this is the updated text"); //the code that changes the content of the div
    });
    });
</script>

Answer 1

在 main_section

之前添加哈希＃

$( document ).ready(function() {

    $( "#my_button").click(function() {
        $("#main_section").html("this is the updated text"); //the code that changes the content of the div
        });
    });

Answer 2

$("#main_section").html("this is the updated text");

选择器应为#main_section，因为它是ID，即在#之前添加main_selection

所以你的JS代码变成了

$( document ).ready(function() {

    $( "#my_button").click(function() {
        $("#main_section").html("this is the updated text"); //the code that changes the content of the div
        });
    });

只需浏览jQuery Selectors即可获得更好的理解。

Answer 3

＆＃13;

$( document ).ready(function() {

$( "#my_button").click(function() {
    $("#main_section").html("this is the updated text"); //the code that changes the content of the div
    });
    });

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<title>Untitled Document</title>
</head>

<body>

<div id="book">
<h1>Price</h1>

  <div id="main_section">
      <div id="tablef">
          <div id="table">
              <div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
          </div>

       <div id="table2">
           <div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
       </div>
 </div>
</div>
 <div id="button_section">
 <input type="button"id="my_button" value="Click me"/></div>

</div>

</body>

＆＃13;

你刚刚错过了jquery选择器中的＃符号！的（$（＆＃34;＃main_section＆＃34））

替换HTML javascript中的div内容

3 个答案: