0

我有像下面这样的 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>

我想要的是..

  1. 每次单击链接时，我都想显示和隐藏文本区域和保存按钮。

  2. 并且当单击保存按钮时，必须在 textarea 之前将 textarea 内容添加为 listitem，每次单击保存按钮时，已编辑的文本都已更新到该列表中。

请任何人指导我这样做..

4

3 回答 3

4

最简单的方法是，如果该Edit your content部分可以包装在自己的容器中，以便在保存时可以完全替换该容器的内容：

<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();
});

演示

您会注意到，在此特定示例中parent可以轻松地替换声明，但使用此代码，您可以轻松地将选择器更改为匹配多个元素的选择器（即; demo）#div1#div1 > a.editable > a

编辑

看来我第一次误读了您的问题，但变化并没有那么大。

与其将文本框设置为 your 的值，不如在.content每次显示时清除它。此外，您可能不想在.content每次单击编辑链接时隐藏。单击保存按钮时，您会创建一个新元素，并将其附加到最后一个元素之后.content，而不是更新现有元素。

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

$('#div1 > input[type=button]').click(function() {
   var parent = $(this).closest('div');

   $('<div/>', { 'class': 'content' })
       .html(parent.find('textarea').val())
       .insertAfter(parent.find('.content:last'));

   parent.find(':input, a').toggle();
});​

请注意，我已更改.content为 a div，因为它的块级行为。这当然也应该反映在初始标记中。

演示

编辑 (2)

要解决您在评论中的问题，关于在单击链接时添加文本区域和保存按钮，您必须进行一些更改。首先，链接点击监听器必须用代码更新以添加元素，并且可能首先检查它们是否已经存在（即第二次点击链接按钮）：

$('#div1 > a').click(function() {
   var parent = $(this).closest('div');
   var txt = parent.find('textarea');

   if(txt.length == 0) {
       txt = $('<textarea/>', { id: 'text1', cols: 3 });
       txt.appendTo('#div1');

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

   txt.val('');
   parent.find(':input, a').toggle();
});

其次，您的侦听$('#div1 > input[type=button]')器将不再像所写的那样工作，因为在评估选择器时文档中没有这样的按钮。要解决此问题，您可以使用实时委托，例如：

$('#div1').on('click', 'input[type=button]', function() { ... });

演示。（对于早期的 jQuery 版本，使用.delegate(selector, event, handler)而不是.on(event, selector, handler).）

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

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

演示

作为奖励，在这些演示中显示文本框后，我将焦点添加到文本框。你可能也想要那个。

于 2012-09-06T06:37:08.927 回答
0

你可以这样做

HTML

<div id="div1">Edit your content 
  <a id="link1" href="#">click to Edit</a>
    <ul id="NewElement"></ul>
    <textarea id="text1" cols="3" style="display:none;"></textarea>
  <input type="button" id="button1" value="Save" />
</div>​

脚本

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

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

现场演示 ​</p>

于 2012-09-06T06:43:41.443 回答
0 
<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>
于 2012-09-06T06:45:19.993 回答