Question

我想在div中动态显示文本区域，当我点击超链接时它是如何完成的。请帮忙。感谢..

<div class="fright clr7" style="padding-top:10px;"><a href="">Reply</a></div>

<textarea name="motivo" rows="25" cols="50" style="height:100%; display:none; width: 100%" ></textarea>

Answer 1

您可以执行以下操作;

$("a").on("click", function() {
    event.preventDefault();
    if ($(".fright").find("textarea").length == 0) {
        $(".fright").append('<textarea name="test" id="test"></textarea>');
    }
});

以下是一个有效的演示： jsfiddle

修改

如果你有隐藏的textarea，你可以使用以下内容;

$("a").on("click", function() { event.preventDefault(); $("textarea[name='motivo']").show(); });

以下是一个有效的演示： jsfiddle

Answer 2

像

这样的东西

$('a[href*="Reply"]').click(function(){
  // update this selector
   $('textarea[name='motivo']').show();
});

Answer 3

<div class="fright clr7" style="padding-top:10px;"><a class="reply" href="">Reply</a>
<textarea style="display:none;">

</textarea>
</div>

和jquery代码：

<script type="text/javascript">

$('a.reply').click(function(){

$(this).closest('textarea').show();

return false;

});

</script>

Answer 4

<div class="fright clr7" style="padding-top:10px;" id="text"><a href="javascript:show()">Reply</a></div>

<script>
  function show()
  {
     document.getElementbyId("text").innerHTML="<textarea>anything here</textarea>";
  }
</script>

Answer 5

试试这个：

$("div.fright a").on("click", function(e) {
    e.preventDefault();
    if($(this).parent("div.fright").find("textarea").length==0)
    $(this).parent("div.fright").append('<textarea name="test" id="test"></textarea>');
});

<强> DEMO

Answer 6

试试这种方式

<div class="fright clr7" style="padding-top:10px;"><a href="">Reply</a>
</div>

<textarea name="motivo" rows="25" cols="50" style="height:100%; display:none; width: 100%" ></textarea>

JS

$("a:contains('Reply')").click(function(e){
   e.preventDefault()
   $('textarea[name="motivo"]').show();

});

DEMO

Answer 7

我认为你需要这个我用过jquery

<script>
 $("#Test").click(function() {
  $("#TestDiv").html("<textarea rows='4'></textarea>");
 });
</script>


<div class="fright clr7" id="TestDiv" style="padding-top:10px;"><a href="" id="Test">Reply</a></div>

Answer 8

<html>

<head>

<script type="text/javascript">

function showtext()

{

document.getElementById('text_a').style.display = 'block';

}

</script>

</head>

<body>

<div>

<textarea id="text_a" style="display:none;"></textarea>

<a href="javascript:showtext();">Show Textarea</a>

</div>

</body>

</html>

Answer 9

你可以试试这个：

<强> Working Fiddle here

$('.fright a').click(function() {
    $('.textarea').fadeIn(500);
     return false;
});

祝你好运......

Answer 10

您可以点击创建textarea并在DIV中追加，只要用户点击链接就可以使用。

<div class="fright clr7" style="padding-top:10px;"><a href="">Reply</a></div>

$(function(){
      $('.fright').on('click', 'a', function(e){
        e.preventDefault();
      $('<textarea />', {
          cols: 50,
          rows: 25,
          name: 'motivo',
          class: 'motivo-text'
      }).appendTo('.fright');
});

单击超链接时如何动态显示textarea

10 个答案: