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

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

与

然后添加脚本

<script>
    $("a.edit").click(function(){
       $("div.question-content").attr("contenteditable", "true");
    });
    </script>

请注意，我已将类添加到链接并替换HREF

---

下面是我的示例

@putvande，它通过单击任意位置使div内容可编辑。我希望当我点击编辑图标时它是可编辑的。谢谢，这很有意义，但由于某些原因，当我点击按钮时，什么都没有发生。为什么会这样？你不会看到太多，但是如果你试着点击div并开始输入，你应该会看到它是可编辑的。您可以为contenteditable元素添加CSS样式，以便更清楚地对其进行编辑。您使用的浏览器是什么？你的页面是在HTML5上工作吗？可能是因为contenteditable在脚本中从未设置为true吗？我正在使用chrome，是的，它是HTML5

<script>
    $("a.edit").click(function(){
       $("div.question-content").attr("contenteditable", "true");
    });
    </script>