个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在这里创建了一个 html 网页:
http://diagrams.inse1d.info/wbt.html
代码:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
这是我编写的 jQuery 代码:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
我想要做的是使用使用 jQuery 的输入框设置标题和一些注释文本。然后，我想在按下按钮时将 html 的副本添加到另一篇文章中，而不复制之前所做的输入，并可以在克隆文章时设置新值。这个过程应该一遍又一遍地重复。
这里有一张图片可以帮助解释: 
我对 jQuery 很陌生，我认为你需要使用循环来解决这个问题，我读到可以使用 .each() http://api.jquery.com/jQuery.each/但不太确定。
任何帮助将不胜感激。谢谢。
最佳答案
我想我得到了你的答案。
我稍微改变了 html，因为你用你的方法重复了一些 id，这不好。 id 在页面上必须是唯一的。我只是将它们更改为类。
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
当然还有 jQuery。我删除了你的前两个函数，因为它们在这种情况下没有任何用途。
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
这是一个工作 fiddel
关于javascript - jQuery .insertAfter() 复制输入字段值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20109747/
24
4
0
我有一些由 CMS 生成的代码: Link Header here Some text here 我需要将链接移到文本 div 之后。我已经尝试过: $(document).ready
只是一个快速的。我想更改标记中两个特定 div 的顺序。两个 div 都有子级。 并希望将其更改为 .second，然后更改为 .first。
我需要将元素插入到每个外部的 Dom 元素中: $items1 = []; $.each($('.qs-option-name'), function () { if($(this).find(
我有一组按钮: Show Links Show Contacts Show Updates Show Action Items 我试图在它后
我正在尝试克隆一个简单的 div 并将其插入到其自身之后: $(document).ready(function() { // clone and append $("div").clone(
好吧，我正在制作一个聊天机器人，但遇到了一个问题。所以我需要创建一个函数，每次按下回车键时都会创建一条聊天消息。到目前为止，一切顺利，只有一个问题。它正在复制一个元素，而我只想要其中一个。 要了解我在
使用一段应该执行简单 DOM 操作的代码得到一些奇怪的行为: b.detach(); b.insertAfter(a); a.remove(); 最初 HTML 看起来像 (如果重要的话，
我有以下标记，由 3 个内容 block 组成，每个内容 block 包含一个标题和一些内容: Heading One U
我正在尝试添加每次之后 。我尝试过以下操作，但它在每个标签后多次添加跨度类。 我也尝试过使用.one()在控制标签类之后但没有起作用。 我也想为每个选择添加相同的类。将在$('#myform :in
我正在使用一个编写过时代码但可以访问 css 和 javascript 的外部系统。我正在使用一个表，该表将每个元素写入单独的行，在某些情况下最多 30 行。我需要将 tr 分成 6 行，每行 5 项
我正在尝试在一些 certian tr 之后附加 tr 并且我使用此代码。但它是通过加倍追加的，第一次只有 1，第二次是 2，第三次是 6 ...有人可以帮我解决这个问题吗？我只想在每次点击时添加一个
我制作了一个简单的脚本，允许用户使用向上和向下按钮对 div 进行排序。 jsFiddle:http://jsfiddle.net/dZ6rC/5/ 不幸的是，我尝试在鼠标单击时设置移动动画并不会导致
如何检查元素是否存在，如果存在，我希望 insertAfter 无效。如果该元素不存在，那么我希望 insertAfter 有效，但仅一次。我的目标是发送如果元素不存在并且不发送任何内容，则仅插入一次
假设我想向一个容器添加多个 DIV，就像这个过度简化示例一样: for(var x=0; x"+x+"").appendTo("#parent"); } 结果(当查看源代码时)将是这样的: 012 类
div 被插入到正确的位置，但它也将 div 保留在旧位置，因此有两个元素不确定为什么要克隆它。我正在编辑 woocommerce 主题。 $(document).ready(function(){
我有以下脚本部分 .on('finish.countdown', function(event) { $(this).text("").parent().addClass('disab
我想在某个元素后面添加隐藏输入。我正在使用这段代码: $("").insertAfter(".addProduct"); 这不起作用。但如果我替换它就可以了。 $("ddd").insertAfter
我正在使用 JavaScript 函数 insertAfter 和 insertBefore，但是我正在尝试 insertAfter 和 insertBefore > 两个元素。 例如，考虑以下 HT
我在这里创建了一个 html 网页: http://diagrams.inse1d.info/wbt.html 代码: WBT Charts
我有以下代码，可以正常工作，在输入正确的值时在输入字段后插入成功范围。但我的问题是，每次我离开球场时，它都会增加跨度。来自问题Jquery insertAfter only once if eleme
我是一名优秀的程序员,十分优秀！