Question

我对JavaScript很陌生，希望有人能帮我找到以下解决方案：

我有一个带有一些文本的div和一个onclick事件。当我点击div时，如何在文本区域内显示div内的文本及其上方的按钮，我该如何管理 - 类似于如何在此处编辑您自己的评论？

默认情况下的显示方式：

<div class="clickable" onclick="TheFunctionIamLookingFor()">Some awesome text.</div>

如何查看点击次数：

<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">Some awesome text.</textarea>

非常感谢任何帮助，蒂姆

Answer 1

试试这个

function youAreLookingFor() {
    var awesomeText = $(this).html();
    var $form = $(this).parent();
    $(this).remove();
    var textArea = '<button type="button" id="myBtn">BtnName</button>
                    <textarea id="myArea">'+ awesomeText +'</textarea>'
    $form.append(textArea);
}

如果你想为每个可点击链接提供不同的myBtn和myArea名称，那么你也应该给可点击的div一个id，然后从那里开始为textarea和按钮创建id。

Answer 2

如果您只想使用javascript DOM元素，那么

<html>
<head>

<style>
.dip
{
display:none;
}
.dip1
{
display:;
}
</style>

<script>
function TheFunctionIamLookingFor()
{
document.getElementById("myArea").className="dip1";
document.getElementById("myBtn").className="dip1";

}
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

<div class="clickable" onclick="TheFunctionIamLookingFor()" >Some awesome text.
<button class="dip" id="b1" type="button" id="myBtn">BtnName</button>
<textarea class="dip" id="myArea">Some awesome text.</textarea>

</body>
</html>

Answer 3

还有另一种方法可以制作您想要的内容，即使用HTML属性contententeditable=true制作可编辑 div。您可以使用以下语法：

<div contenteditable=true>
    contents here
</div>

这有助于div中的复制+粘贴图像以及文本编辑，即使用键盘快捷键等在文本上应用字体 < / p>

选中 fiddle

jQuery：点击textarea中的div show text

3 个答案: