0

我有一个简单的输入行，并且想在每次有人按下 OK 按钮时附加输入的任何内容。到目前为止听起来很简单，但我仍然无法让它工作 HTML：

<p>
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" /> 
<p id="status">Ok</p>
<br>

查询：

$(document).ready(function(){
$('#status').on('click', function(){
var input = $('input[name=todo]').val();
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').after('#status');
 });
 });

我也尝试了 append 或 appendTo 的运气，但两次都没有成功。以防万一这里是 JSFiddle：http: //jsfiddle.net/NRWzE/

4

5 回答 5

2

看起来您打算使用：

$('#status').after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');

（见after文档）

或者，或者insertAfter：

$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').insertAfter('#status');
于 2013-05-30T17:44:58.417 回答
2

.after() 有效，但您需要正确设置它，根据文档它应该是：

.after( content [, content ] )

所以正确的做法是：

$("#status").after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
于 2013-05-30T17:46:05.953 回答
2

尝试使用 jquery insertAfter：

$(document).ready(function () {
    $('#status').on('click', function () {
        var input = $('input[name=todo]').val();
        $('<br><b id="taskz">' + input + '</b> - <b id="statusz">Ok</b>').insertAfter('#status');
    });
});
于 2013-05-30T17:44:26.030 回答
1

尝试这个：

$('#status').click(function(){
    var input = $('input[name=todo]').val();
    $('#status').append('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
});
于 2013-05-30T17:42:08.710 回答
1

发生了一些事情，但最重要的是您需要研究更多如何after工作append和appendTo工作。以下是共享名称但最后具有的方法的基本语法差异To：

  • Newcontent.appendTo(existingElement)返回newElements。
  • existingElement.append(newContent)返回existingElement。

此外，after将新元素作为参考元素的同级元素，而append将新元素作为子元素。这是一个重要的区别。

所以，然后试试这个脚本：

var taskid = 1;

$('#valueform').on('submit', function(){
    var input = $('#todo').val();
    $('<br><span id="task' + taskid.toString() + '">' + input
       + '</span> - <span id="status' + taskid.toString()
       + '">Ok</span>').appendTo('#status');
    taskid += 1;
    $('#todo').focus().select();
    return false;
});
$('#todo').focus().select();

在 JSFiddle 上查看现场演示

这是支持的 HTML：

<form id="valueform">
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<input type="submit" value="OK" id="okbutton">
</form>
<p id="status"></p>

还有一些其他的担忧：

  • 我建议您研究在哪些 HTML 元素中允许使用哪些 HTML 元素。
  • 不要在每个项目上放置<b>标签，而是使用 CSS。此外，如果粗体字在语义上<strong>很重要，请改用。<b>也可能不应该采取，id因为它是一个演示标签，而不是一个内容标签。在考虑表示与语义时，必须考虑无法呈现粗体文本的屏幕阅读器或浏览器——在这种情况下，<strong>如果需要，它们将允许它们以另一种方式强调文本。
  • 熟悉jQuery 文档。仔细阅读每个函数的确切作用、它所作用的对象、预期的参数和返回的值，将使您能够在未来克服障碍，而不必在这里询问。
  • 在我看来，您想将新内容放在#status段落中，而不是在段落之后。所以我就这样写了我的剧本。如果你把它放在你写它的方式之后，那么最近的状态将在顶部——但是你<br>在任何块级元素之外都有非块级内容（以 your 开头）。所以你应该追加<p>元素，或者你应该把你的内容放在现有的<p>.

注意：我添加了一个表单并制作了按钮类型submit，而不是button为了轻松处理 Enter 键。它不必是这样的。

于 2013-05-30T17:53:35.893 回答