[英]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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.