HTML 通过单击编辑按钮使 Div 可编辑答案

【问题标题】：HTML making Div editable by clicking on the edit buttonHTML 通过单击编辑按钮使 Div 可编辑
【发布时间】：2023-03-26 07:00:02
【问题描述】：

当我点击左下角的编辑图标时，我试图让两个 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>

【问题讨论】：

@putvande 通过单击任意位置使 div 内容可编辑。当我点击编辑图标时，我希望它是可编辑的。

标签： javascript jquery html css edit

【解决方案1】：

好吧，你可以这样做：

<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 元素添加 CSS 样式，以便更清楚地编辑它。
你用的是什么浏览器？你的页面是在 HTML5 上工作的吗？
可能是因为脚本中的 contenteditable 从未设置为 true 吗？
我使用的是 chrome，是的，它是 html5

【解决方案2】：

嗯，你的问题不清楚，但我会尝试猜测。如果你想让 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/

【讨论】：