六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

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

Admin | 2017-1-3 10:30:51 | ReadNums | 659 | 标签 网页制作 | 打印本页
     

  一、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");
  }


问题未解决:在线咨询我要在线咨询问题

四肖期期中准资料

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日