Javascript 如何在jquery中每次单击链接时向div添加/附加和切换项？_Javascript_Jquery

Javascript 如何在jquery中每次单击链接时向div添加/附加和切换项？

javascript jquery

Javascript 如何在jquery中每次单击链接时向div添加/附加和切换项？,javascript,jquery,Javascript,Jquery,我有下面这样的div <div id="div1">Edit your content <a id="link1" href="#">click to Edit</a> <textarea id="text1" cols="3"/> <input type="button" id="button1" value="Save" /> </div> 编辑您的内容我想要的是我想在每次点击链接时显示和隐藏文本区

我有下面这样的div

<div id="div1">Edit your content 
  <a id="link1" href="#">click to Edit</a>
  <textarea id="text1" cols="3"/>
  <input type="button" id="button1" value="Save" />
</div>

编辑您的内容

我想要的是

我想在每次点击链接时显示和隐藏文本区域和保存按钮

当单击保存按钮时，必须在textarea as listitem之前添加textarea内容，每次单击保存按钮时，编辑的文本都会更新到该列表中

请任何人指导我这样做。

如果

编辑您的内容

部分可以包装在自己的容器中，那么简单的方法是，保存后可以完全替换该容器的内容：

<div id="div1">
   <span class="content">Edit your content</span>
   <a id="link1" href="#">click to Edit</a>
   <textarea id="text1" cols="3"></textarea>
   <input type="button" id="button1" value="Save" />
</div>

$('#div1 > a').click(function() {
   var parent = $(this).closest('div');
   parent.find('textarea').val(parent.find('.content').html());
   parent.find(':input, .content, a').toggle();
});

$('#div1 > input[type=button]').click(function() {
   var parent = $(this).closest('div');
   parent.find('.content').html(parent.find('textarea').val());
   parent.find(':input, .content, a').toggle();
});

注意，由于其块级行为，我已将

.content

更改为

div

。当然，这也应该反映在初始标记中

编辑（2）

为了解释你在评论中提出的关于在点击链接时添加textarea和save按钮的问题，你需要做一些更改。首先，链接点击监听器必须使用代码进行更新，以添加元素，并且可能需要首先检查它们是否已经存在（即第二次点击链接按钮）：

。（对于早期的jQuery版本，请使用

.delegate（选择器、事件、处理程序）

而不是

.on（事件、选择器、处理程序）

）

。。。或者，您可以在创建按钮时立即将侦听器添加到按钮：

$('<input />', { type: 'button', id: 'button1' })
    .val('Save')
    .appendTo('#div1')
    .click(saveEdit);

$（''，{type:'button'，id:'button1'}）
.val（'保存'）
.appendTo（“#div1”）
。单击（保存编辑）；

作为奖励，我在这些演示中展示了文本框后，将其添加到文本框中。您可能也希望如此。

简单的方法是，如果

编辑您的内容

部分可以包装在自己的容器中，以便在保存时完全替换该容器的内容：

<div id="div1">
   <span class="content">Edit your content</span>
   <a id="link1" href="#">click to Edit</a>
   <textarea id="text1" cols="3"></textarea>
   <input type="button" id="button1" value="Save" />
</div>

$('#div1 > a').click(function() {
   var parent = $(this).closest('div');
   parent.find('textarea').val(parent.find('.content').html());
   parent.find(':input, .content, a').toggle();
});

$('#div1 > input[type=button]').click(function() {
   var parent = $(this).closest('div');
   parent.find('.content').html(parent.find('textarea').val());
   parent.find(':input, .content, a').toggle();
});

注意，由于其块级行为，我已将

.content

更改为

div

。当然，这也应该反映在初始标记中

编辑（2）

。（对于早期的jQuery版本，请使用

.delegate（选择器、事件、处理程序）

而不是

.on（事件、选择器、处理程序）

）

。。。或者，您可以在创建按钮时立即将侦听器添加到按钮：

$('<input />', { type: 'button', id: 'button1' })
    .val('Save')
    .appendTo('#div1')
    .click(saveEdit);

$（''，{type:'button'，id:'button1'}）
.val（'保存'）
.appendTo（“#div1”）
。单击（保存编辑）；

作为奖励，我在这些演示中展示了文本框后，将其添加到文本框中。你可能也需要这样做。

你可以这样做

HTML

编辑您的内容

Jscript

$('#link1').click(function(){
$('#text1').toggle();
});

$('#button1').click(function(){
  $('#NewElement').append('<li>' + $('#text1').val()  +'</li>'); 
});

$（“#link1”）.单击（函数（）{
$（'#text1'）.toggle（）；
});
$（'#按钮1'）。单击（函数（）{
$（'#NewElement'）.append（''+$（'#text1'）.val（）+''）；
});

你可以这样做

HTML

编辑您的内容

Jscript

$('#link1').click(function(){
$('#text1').toggle();
});

$('#button1').click(function(){
  $('#NewElement').append('<li>' + $('#text1').val()  +'</li>'); 
});

$（“#link1”）.单击（函数（）{
$（'#text1'）.toggle（）；
});
$（'#按钮1'）。单击（函数（）{
$（'#NewElement'）.append（''+$（'#text1'）.val（）+''）；
});


$（文档）.ready（函数（）{
$（'#link1'）。单击（函数（）{
$（'#some'）.toggle（）；
});
$（'#按钮1'）。单击（函数（）{
$（'ul'）.append（''+$（'#text1'）.val（）+''）；
})
})
编辑您的内容


$（文档）.ready（函数（）{
$（'#link1'）。单击（函数（）{
$（'#some'）.toggle（）；
});
$（'#按钮1'）。单击（函数（）{
$（'ul'）.append（''+$（'#text1'）.val（）+''）；
})
})
编辑您的内容

谢谢您的帮助。。我不想编辑这个内容，我要把一个新的文本添加到列表项中。只有一个问题，我可以在链接按钮的时候点击那个按钮，它会起作用吗？@拉米什：当然，但是你必须考虑一些变化。请看我的编辑。谢谢你的帮助。。我不想编辑这个内容，我要把一个新的文本添加到列表项中。只有一个问题，我可以在链接按钮的时候点击那个按钮，它会起作用吗？@拉米什：当然，但是你必须考虑一些变化。请参阅我的编辑。

$('#link1').click(function(){
$('#text1').toggle();
});

$('#button1').click(function(){
  $('#NewElement').append('<li>' + $('#text1').val()  +'</li>'); 
});

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#link1').click(function(){
        $('#some').toggle();
    });
    $('#button1').click(function(){
        $('ul').append('<li>'+$('#text1').val()+'</li>');
    })
})
</script>
</head>

<div id="div1">Edit your content 
    <a id="link1" href="#">click to Edit</a>
    <ul></ul>
    <div id="some">
        <textarea id="text1" cols="3"/></textarea>
        <input type="button" id="button1" value="Save" />
    </div>
</div>