2

私はテキスト入力の形式を持とうとしています。すべての入力は、順序付けられたリスト OL/LI 構造になります。入力の横に + 記号が表示されます。これをクリックすると、サブ OL が作成され、別の入力でセカンダリ リストが作成されます。もう一度クリックすると、別の入力が追加されます。新しい入力にも + 記号があり、同じことができます。技術的には 3 層まで進めたいだけですが、その部分は後で理解できると思いますが、私が本当に求めているのは、これを実現する方法です。

私はそれの最初の段階を持っていますが、LI の重複が多すぎて、何が起こっているのかわかりません。これは私が持っているものです。

    $('.add_sub_page').live('click',function(e){
    $("<ol>").append($(this).parent().clone()).insertAfter(this);
    e.preventDefault();
});

これを IRC チャット ルームに持ち込んで、この解決策が提供されましたが、最初の解決策と同じ問題があるため、作業が簡単かどうかわからないので、同様に提供します。

    $('.add_sub_page').live('click',function(e){
    var ol = $("ol",this), new_ol = ol.length ? false : true;

    ol = new_ol ? $("<ol>") : ol;

    ol.append($(this).parent().clone());

    if (new_ol) {
        ol.insertAfter(this);
    }

    e.preventDefault();
});

そして、私が作業しているHTMLを見ることができるように...

<form id="sitemap" action="" method="post">
<ol>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
</ol>
<p><input type="submit" name="submit_step1" value="Next Step"></p>
</form>

問題はhttp://jsbin.com/everu3でプレビューできます -- 同じプラス (+) 記号を 2 回クリックして、問題を確認します。

ご協力いただきありがとうございます。

4

1 に答える 1

2

<ol>次のように、追加時に以前に追加した子要素を削除するだけです。

$('.add_sub_page').live('click',function(e){
  $("<ol>").append($(this).parent().clone().children('ol').remove().end())
           .insertAfter(this);
  e.preventDefault();
});​

ここで試してみることができます。私たちが違うことをしているのは、クローンを作成するときに.children()それが<ol>要素であることを探し.remove()、クローンされたセットからそれらに対して a を実行.end()し、元のクローンされた要素にチェーンをホップバックするために使用することだけです。それが追加したいものです。

編集:現在の番号付けを取得するには、クリックしている番号の横に<ol>1 つ必要です。これを行うには、次のように少し変更します。<ol><a>

$('.add_sub_page').live('click',function(e){
  $(this).parent(':not(:has(ol))').append('<ol></ol>');
  $(this).next().append($(this).parent().clone().children('ol').remove().end());
  e.preventDefault();
});​

ここで試してみてください。<ol>これが行うことは、 がなく、 が追加された場合にのみ、親に移動することです<ol>(すでに1 つある場合.append()は、何も実行されません)。<ol>次に、要素であるべきものを探して、それ.next()に追加します。

また、3 つのレベルで停止する、わずかに変更されたバージョンもあります。

$('.add_sub_page').live('click',function(e){
  $(this).parent(':not(:has(ol))').append('<ol></ol>').end()
         .next().append($(this).parent().clone().children('ol').remove().end());
  if($(this).parents('.page-title').length == 2)
     $(this).next().find('.add_sub_page').remove();
  e.preventDefault();
});​
于 2010-07-22T23:33:38.443 に答える