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