Dzwebs.Net

撰写电脑技术杂文十余年

动态替换元素及动态设置新增元素事件

Admin | 2017-1-3 10:30:51 | 被阅次数 | 4400

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  一、DIV元素原来的内容

  <div id="JkTestDiv">
  题目题目这里是题目的内容?
   <br>A、答案1
   <br>B、答案2
   <br>C、答案3
   <br>D、答案4
  </div>

  二、问题需求

  现在,要动态替换掉上面的答案选项的内容,比如,

  把 <br>A、答案1 变成 <p id='1'>A、答案1</p>

  总之,上面的DIV的内容,变成如下

  <div id="JkTestDiv">
  题目题目这里是题目的内容?   
  <p id="1">A、答案1  </p>
  <p id="2">B、答案2  </p>
  <p id="3">C、答案3  </p>
  <p id="4">D、答案4  </p>
  </div>

  同时,还有把新增加的这个P对象,设置其事件。

  三、JS功能代码如下

  下面的代码实现动态替换内容并设置新增P元素的事件。

  var DivHtml=$('#JkTestDiv').html();
  MyStr=$('#JkTestDiv').html().split('<br>');
  for (i=1;i<MyStr.length ;i++ )
  {
          if(MyStr[i].length>3)
          {
              DivHtml=DivHtml.replace(MyStr[i],"<p id='"+i+"'>"+MyStr[i]+"</p>");
              DivHtml=DivHtml.replace("<br>","");
          }
  }
  $('#JkTestDiv').html(DivHtml);
  $('#JkTestDiv p').on("click",function(){GetMyDXRBLResult($(this).attr("id")-1)});

  其中,$('#JkTestDiv p').on("click",function(){GetMyDXRBLResult($(this).attr("id")-1)});这一句就是动态设置新增元素P的事件。

  四、事件函数

  function GetMyDXRBLResult(Answer)
  {
      //$("#DXRBL_"+Answer).prop("checked","checked");
      var ID=Answer+1;
      $("#"+ID).animate({opacity:"0.1",fontSize:'+=2'},"200");
      $("#"+ID).animate({opacity:"1",fontSize:'+=-2'},"200");
  }


该杂文来自: 网页制作杂文

上一篇:在网页HTML中添加新元素的三种方法

下一篇:nodejs解决中文乱码的方法

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计