更改 Div 内容

Change Div Content

提问人:GelS Sy 提问时间:5/12/2020 最后编辑:GelS Sy 更新时间:2/23/2021 访问量:80

问:

我需要帮助才能使我的代码正常工作。我知道这里有类似的问题,但所有的答案都不适用于我。所以我的问题是我想通过单击我的一个链接来更改 Div 的内容。这是我的代码。

        <div id="left">
             <h1>Welcome to This Section</h1>
             <h1>Welcome to This Content</h1>
        </div>

这是我的链接


           <div id="green2" class="block">
               <a href="#" id="about">About</a>
               <i class="fa fa-keyboard-o"></i>
           </div>

这是我的JQuery

$(document).ready(function(){

   $(document).on('click', '.about', function(){
       document.getElementById("left").innerHTML = "<p>This is a <span>new</span> paragraph</p>";
   });

});

我只想用 id “left” 更改 div 中的所有内容,但似乎有问题。任何帮助将不胜感激。提前致谢。

HTML jQuery

评论

1赞 DBS 5/12/2020
.about选择类,而不是 ID(将选择 ID)#about
0赞 freedomn-m 5/12/2020
嗨,您需要学习使用浏览器调试器,或者至少在您的代码中加入大量的 .我为什么这么说?您的问题集中在“更改 div 内容”和“更改 id left 的 div”——但这部分代码很好。问题出在点击处理程序上 - 如果你只是简单地添加了一个控制台.log在doc.on.click之前,在doc.getelement之后添加一个控制台,那么你会看到a)你的代码正在运行(一个好的开始)和b)click事件永远不会触发 - 所以甚至没有到达你所询问的部分。您也可以在没有单击处理程序的情况下尝试此部分。console.log
0赞 GelS Sy 5/12/2020
@freedomn我可能会对此进行一些研究,因为我是jQuery的新手:)顺便说一句,谢谢。
0赞 freedomn-m 5/12/2020
从您的评论到正确回答您提出的问题的答案 - 您能否使用您尝试过/未尝试过的内容以及确切的问题是什么(以及任何控制台错误)来更新问题。您的代码,如所呈现的(并假设根据注释)工作正常,并且可以很容易地证明这样做。#
0赞 freedomn-m 5/12/2020
理想情况下,您需要更新您的问题以包含演示问题的片段(请参阅最小可重现示例)。在这种情况下,这里有一个 jsfiddle 与您的代码(包括而不是 )工作正常。jsfiddle.net/8m67a9ru#.

答:

0赞 Youji 5/12/2020 #1

如果您使用的是 JQuery,为什么不使用它的功能呢?您也正在称呼 .about 而不是 #about。

$(document).ready(function(){

   $("#about").on('click', function(){
       $("div#left").html("<p>This is a <span>new</span> paragraph</p>");
   });

});

评论

0赞 DBS 5/12/2020
函数之前缺少 a。.html()
0赞 freedomn-m 5/12/2020
这并不能回答问题 - 它只是转换为具有与 OP 相同的问题的 jquery,并引入了多个新问题,尤其是缺少.
0赞 GelS Sy 5/12/2020
@Youji我也做了那个代码,但它仍然不起作用。
1赞 Simone Rossaini 5/12/2020 #2

你在 js 中错了:

 $(document).on('click', '.about', function(){

 $(document).on('click', '#about', function(){

因为你抓住了 id 而不是类

没有jquery的示例(不是必需的):

const about = document.getElementById("about");
about.onclick = function()   
{
   document.getElementById("left").innerHTML = "<p>This is a <span>new</span> paragraph</p>";
};
      
<div id="left">
  <h1>Welcome to This Section</h1>
  <h1>Welcome to This Content</h1>
</div>
<div id="green2" class="block">
  <a href="#" id="about">About</a>
  <i class="fa fa-keyboard-o"></i>
</div>

评论

0赞 GelS Sy 5/12/2020
哦,我忘了把它改回来,我只是在尝试,因为即使我使用 #,代码仍然没有运行。