Добавление элемента jquery?

49
5

heres ссылка на веб-страницу s1527.mtchs.org/chat.html

Когда вы отправляете или нажимаете enter, значение моего текстового поля добавляется к 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>

спросил(а) 2013-01-09T05:52:00+04:00 7 лет, 1 месяц назад
1
Решение
51

Вы использовали.html() вместо.append() в строке 21. Изменение этого было недостаточно, потому что ваше дело с фактической длиной надписи и тем, как набирать строку, было неправильным, поэтому я исправлял ваши ключевые функции. Смотрите мой jsfiddle. Я также сделал так, чтобы он добавлял новый контент в новую строку при каждом нажатии submit. Кроме того, курсор будет "следовать" содержимому!

См.: 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 = "";
}

ответил(а) 2013-01-09T06:45:00+04:00 7 лет, 1 месяц назад
34

Я не совсем уверен, как вы хотите, чтобы это выглядело в конце, но вы используете append() неправильно.

Попробуй это:

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

Вместо вашего:

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

Это добавит элемент <p class="caption">(textarea caption)</p> в.


Вы также можете немного изменить анимацию типа(), что-то вроде этого:

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

Вместо вашего:

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

Это все еще не идеально, поскольку курсор не находится внизу, но вы можете добиться этого, добавив новый элемент прямо над курсором.

ответил(а) 2013-01-09T06:26:00+04:00 7 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема