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. また、保存ボタンをクリックすると、テキストエリアの前にリスト項目としてテキストエリアのコンテンツを追加する必要があり、保存ボタンをクリックするたびに、編集されたテキストがそのリストに更新されます。

誰でもこれを行うように私を案内してください..

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

編集

初めてあなたの質問を読み違えたようですが、変更点はそれほど大きくありません。

テキストボックスを の値に設定するのではなく、.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したことに注意してください。divもちろん、これは最初のマークアップにも反映されます。

デモ

編集 (2)

リンクのクリック時にテキストエリアと保存ボタンを追加することについて、コメントで質問を説明するには、いくつかの変更を加える必要があります。まず、リンク クリック リスナは、要素を追加するコードで更新する必要があります。おそらく、要素が既に存在するかどうかを確認するための最初のチェック (つまり、リンク ボタンの 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>
<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 に答える
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>​

Jscript

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

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

ライブデモ </p>

于 2012-09-06T06:43:41.443 に答える