发新贴  快速回复

我只能实现一次的修改啊, 当保存或取消之后就不能再改了,怎么修改啊

  hpnjstar
2017-11-15 20:47
附件下载:
 

本帖内容针对以下视频发布:

3-传参实例:商品价格计算及4道课后小练习
 
童童

同学你好,


当点击确定或者取消时候,


你的做法是


把 oP.innerHTML 改变成了 新的 字符串, 然后解析出和原来一样的内容


虽然看上去和之前一样,但是,已经是新的内容,并没有添加点击事件处理函数


建议,在页面布局时,写好所有元素,分别显示和隐藏,


当点击编辑\确定或者取消 的时候 控制元素的显示隐藏的切换,


那页面中还是之前的元素,依然有点击事件处理函数存在,即可多次编辑

2017-11-16 17:29  回复本帖
 
hpnjstar

童童 2017-11-16 17:29发表的内容:

同学你好,


当点击确定或者取消时候,


你的做法是


把 oP.innerHTML 改变成了 新的 字符串, 然后解析出和原来一样的内容


虽然看上去和之前一样,但是,已经是新的内容,并没有添加点击事件处理函数


建议,在页面布局时,写好所有元素,分别显示和隐藏,


当点击编辑\确定或者取消 的时候 控制元素的显示隐藏的切换,


那页面中还是之前的元素,依然有点击事件处理函数存在,即可多次编辑

老师,还是有点问题
2017-11-17 09:56  回复本帖
 
hpnjstar

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible"

content="ie=edge">

<title>修改文本框的值</title>

<style>

p{ margin: 0;font-size: 12px;line-height:30px;

text-indent: 24px;}

.p1{ color: #fff;background: green;

line-height:24px;display: block;font-size: 12px;

text-indent: 24px; }

#box{ width: 400px;height: 90px;border-top:

1px solid #000; }

#tp{ height: 32px;border-bottom: 1px #ccc solid; }

#text{ /*margin-left: 24px;*/margin-top: 5px;}

.btn{border:none;background: none;color: green;}

form{display: none;}

</style>

<script>

window.onload = function(){

 

fntab('tp','inp');

fntab('bm','inp');

}

function fntab(id){

var oDiv=document.getElementById(id);

var oImg=oDiv.getElementsByTagName('img')[0];

var oP=oDiv.getElementsByTagName('p')[0];

var oBtn=oDiv.getElementsByTagName('input');

var oInp=oDiv.getElementsByTagName('form')[0];

 

oImg.onclick = function(){

// oP.innerHTML='<input id="text" type="text" value="妙味实体课程">'

// +'<input class="btn" type="button" value="保存">'

// +'<input class="btn" type="button" value="取消">';

oP.style.display = 'none';

oInp.style.display = 'block';

}



oBtn[1].onmouseover=function(){

oBtn[1].style.backgroundColor='green';

oBtn[1].style.color='#fff';

}

oBtn[1].onmouseout=function(){

oBtn[1].style.backgroundColor='';

oBtn[1].style.color='green';

}

oBtn[1].onclick=function(){

oP.style.display = 'block';

oInp.style.display = 'none';

// if(oBtn[0].value==''){

// oP.innerHTML='妙味实体课'+'<img src="img/ico1.gif" />';

// }else{

oP.innerHTML=oBtn[0].value+'<img src="img/ico1.gif" />';

// }

//当保留54行时,只能修改一次,如果没填写东西,就只有编辑图片,也只能修改一次;

//当P54行取消时,点击保存,效果和点击取消一样;

//当去掉后面的图片时,点击保存,没填写东西时,该行无,填写文字时,就没有编辑图片了

 

}

oBtn[2].onmouseover=function(){

oBtn[2].style.backgroundColor='green';

oBtn[2].style.color='#fff';

}

oBtn[2].onmouseout=function(){

oBtn[2].style.backgroundColor='';

oBtn[2].style.color='green';

}

oBtn[2].onclick=function(){

oP.style.display = 'block';

oInp.style.display = 'none';

}

// }

onOff=false;

}//fntab

</script>

</head>

<body>

<div id="box">

<span class="p1">名称分类</span>

<div id="tp">

<p>妙味实体课程 <img src="img/ico1.gif" /></p>

<form >

<input id="text" type="text">

<input id="btn1" class="btn" type="button" value="保存">

<input id="btn2" class="btn" type="button" value="取消">

</form>

</div>

<div id="bm">

<p>妙味实体课程 <img src="img/ico1.gif" /></p>

<form >

<input id="text" type="text">

<input id="btn1" class="btn" type="button" value="保存">

<input id="btn2" class="btn" type="button" value="取消">

</form>

</div>

</div>

</body>

</html>

2017-11-17 09:56  回复本帖
 
童童

同学你好


这个效果你只需要,把展示的元素(文字,图片)用盒子Box1包起来 ,


把编辑的元素(输入框,确定,取消)用盒子Box2包起来


点击图片 ,隐藏 Box1 显示Box2,


点击确定 ,隐藏Box2 显示Box1,并且修改文字内容


点击取消 ,隐藏Box2 显示Box1


 


你的问题出在:


点击保存的时候,修改oP.innerHTML = oBtn[0].value + '<img src="img/ico1.gif" />';


在此处你加上的img是没有点击事件处理函数的.所以点击没有效果


所以在点击确认和取消的时候,不要改变整个p的内容;


应该把文字用一个span标签单独包起来,


然后,点击确定时候 只修改这个span的内容,


不要处理后面的img,这样能确保img还有点击事件处理函数


 

2017-11-22 11:54  回复本帖
登录 后才可以发表回复