HTML使Div可通过点击编辑按钮进行编辑
HTML making Div editable by clicking on the edit button
当我点击左下角的编辑图标时,我正试图使两个div都可编辑。我该怎么做?
<li class="question" id="question2">
<div class="question-header curves dense-shadows">
What color is the sky?
</div>
<div class="question-content dense-shadows">
<ol type="A">
<li><input type="radio" id="q2a1" name="question2" /> Red</li>
<li><input type="radio" id="q2a2" name="question2" /> Green</li>
<li><input type="radio" id="q2a3" name="question2" /> Blue</li>
<li><input type="radio" id="q2a4" name="question2" /> Brown</li>
</ol>
<div style="text-align:right">
<a href="#"><span style="margin-left:5px;"><img src="images/editbutton.png"
onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>
<a href="#"><span style="margin-left:5px;"><img src="images/deletebutton.png"
onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/></span></a>
</div>
</div>
</li>
好吧,你可以这样做:
<li class="question" id="question2">
<div class="question-header curves dense-shadows">
What color is the sky?
</div>
<div class="question-content dense-shadows">
<ol type="A">
<li><input type="radio" id="q2a1" name="question2" /> Red</li>
<li><input type="radio" id="q2a2" name="question2" /> Green</li>
<li><input type="radio" id="q2a3" name="question2" /> Blue</li>
<li><input type="radio" id="q2a4" name="question2" /> Brown</li>
</ol>
<div style="text-align:right">
<a href="#" class="edit"><span style="margin-left:5px;"><img src="images/editbutton.png"
onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>
<a href="#" class="delete"><span style="margin-left:5px;"><img src="images/deletebutton.png"
onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/></span></a>
</div>
</div>
</li>
<script>
$('a.edit').on('click',function(){
$(this).closest('li').find('.question-header, .question-content').attr('contenteditable','true');
});
</script>
请注意,我已将class="edit"
和class="delete"
添加到您的按钮中。
你的问题还不清楚,但我会试着猜测。如果你想让div可编辑,你可以用contenteditable 标记它
所以要替换你的代码
<a href="#"><span style="margin-left:5px;"><img src="images/editbutton.png"
onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>
带有
<a href="javascript:void(0)" class="edit"><span style="margin-left:5px;"><img src="images/editbutton.png"
onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>
然后添加脚本
<script>
$("a.edit").click(function(){
$("div.question-content").attr("contenteditable", "true");
});
</script>
请注意,我已将类添加到链接并替换HREF
这是我的例子http://jsfiddle.net/r9HTe/
相关文章:
- 如何避免日期损坏按下保存按钮在免费jqgrid内联编辑
- 按回车键将离开“内容可编辑”框
- 按行名称编辑行中的值
- 如何按字段转换器对 xPage 多行编辑框进行排序
- 在内容可编辑元素上按 Enter 时插入 BR 或 P 标签的跨浏览器方式
- 按规则编辑表达式以编辑 Greasemonkey 中的 URL
- 如何将“oninput”添加到html表单标签,按id定位标签,而不是编辑表单标签本身
- 王牌编辑器,如何在不必按 alt 的情况下打开块选择
- 如何在不按回车键的情况下使我的内联编辑自动发送
- 使用下拉列表编辑器的剑道网格-线编辑(编辑自定义编辑器)
- 如何在wysiwyg编辑器中按需隐藏光标闪烁符(插入符号)?(redector.js)
- 如何在按下按钮时创建不可编辑的类型(如标签)
- Stackoverflow WYSIWYG Pagedown.js编辑器限制实时预览,点击而不是按下键
- 我该如何按逆时针方向编辑极钟呢?
- 如何在jqgrid中按ctrl+s保存添加和编辑表单
- 任何方法,使一个触发器或按钮,让用户按下和运行,而不是去脚本编辑器
- 在编辑器对话框中按需填充iggrid组合框列
- JavaScript 按类和 id 从标签编辑 InnerHTML
- 可编辑的表格单元格在按回车键时取值
- nicEdit:向编辑器添加键(按|上|下)事件