Question

表示链接指向网页s1527.mtchs.org/chat.html

当您提交或按Enter时，我的textarea的值将附加到div。当这种情况再次发生时，div中的旧值将被删除并附加新的值？我怎么做它所以它增加了另一个值而不是删除旧值？

jQuery的：

var captionLength = 0;
var caption = "";

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();
  $(caption).append('<div id = content></div>');
  type();
  }
}

function type() 
{
    $('p.caption').html(caption.substr(0, captionLength++));
    if(captionLength < caption.length+1)
    {
        setTimeout("type()", 50);
    }
    else {
        captionLength = 0;
        caption = "";
}   
}
function testErasingEffect()
{
 caption = $("p.caption").html();
  captionLength = caption.length;
 if (captionLength>0)
  {
erase();
 }
 else
  {
$('p.caption').html("You didn't write anything to erase, but ok!");
   setTimeout("testErasingEffect()", 1000);
 }
   }

           function erase()
          {
$('p.caption').html(caption.substr(0, captionLength--));
if(captionLength >= 0)
{
    setTimeout("erase()", 50);
}
else {
    captionLength = 0;
    caption = "";
}   
}

function cursorAnimation() 
{
  $("p.cursor").animate(
 {
   opacity: 0
}, 300, "swing").animate(
 {
 opacity: 1
 }, 300, "swing");
}
$(document).keypress(function(e) {
   if(e.which == 13) {
       testTypingEffect();
  }
});

HTML：

<div id="chatwrapper">
  <div id="tab">chatname</div>
  <div id="content">
    <p id="time"> 2:14:26pm</p>
    <div id="effectTesting">
      <p id="user">\\diablo\\student\2015:</p>
      <p class="caption"></p>
      <p class="cursor">|</p>
    </div>
    <p class="testing"></p>
    <br>
  </div>
  <div id="textarea">
    <textarea id="userInput" onclick="if(this.value=='Message'){this.value=''}" onblur="if(this.value==''){this.value='Message'}">Message</textarea>
    <input type="submit" id="submit" name="submit" value="Submit" onclick="testTypingEffect()"/>
  </div>
</div>

Answer 1

你在第21行使用了.html（）而不是.append（）。改变这个是不够的，因为你处理实际的标题长度以及如何键入字符串是不正确的，所以我重写了你的键功能。看我的jsfiddle。我也这样做，所以每次按下提交时，它都会在新行上添加新内容。此外，光标将“跟随”内容！

请参阅：http://jsfiddle.net/GJBGt/9/

HTML：您的原始HTML

CSS：

span{ float:left; clear:both; margin: 5px 0px; overflow: auto;}
#textarea{ float: left; clear:both}
.cursor{ display:inline }

JS：

var caption = "";
//you REALLY DON'T NEED variable captionLength that you had here before

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();

  typefirst();
  }
}

function typefirst() 
{
    $('p.caption').append("<span></span>");
    type();
}

function type()
{
    $("span").eq(-1).append(caption.substr(0, 1));
    $(".cursor").appendTo($("span").eq(-1));
    if(caption.length > 0)
    {
        caption = caption.substring(1);
        setTimeout("type()", 50);
    }
    else {
        caption = "";
}

Answer 2

我不确定你最终会想要它的样子，但是你使用的是append（）错误。

试试这个：

$("#content").append("<p class='caption'>"+caption+"</p>");

而不是你的：

$(caption).append('<div id = content></div>');

这会将元素<p class="caption">(textarea caption)</p>添加到。

中

你可能还想稍微改变你的type（）动画，如下所示：

$('p.caption:last').html(caption.substr(0, captionLength++));

而不是你的：

$('p.caption').html(caption.substr(0, captionLength++));

由于光标不在底部，因此仍然不完美，但您可以通过在光标正上方附加新元素来实现。

追加元素jquery？

2 个答案: