0

だから私はなぜ私が次のようなネストされたリストを持っているのだろうかと思っています

<ul id="categories">
  <li> <span class="categoriesSort">[Move]</span>Category
    <ul id="tasks">
      <li><span class="handle">[Move]</span>Task</li>
      <li><span class="handle">[Move]</span>Task</li>
    </ul>
  </li>
  <li> <span class="categoriesHandle">[Move]</span>Category
    <ul id="tasks">
      <li><span class="handle">[Move]</span>Task</li>
      <li><span class="handle">[Move]</span>Task</li>
    </ul>
  </li>
</ul>

タスクを編集可能にするには、2番目のカテゴリを一番上に配置する必要があります.....両方のカテゴリを移動できます。しかし、1つは上にある必要があります。2番目のカテゴリをリストの一番上に移動してそのタスクを編集すると、それを一番下にドラッグしてタスクリストの編集を続けることができますが、ページを更新すると、それらのタスクは編集できなくなります。

コード

 jQuery(function() {
    return $('#categories').sortable({
      axis: 'y',
      handle: '.categoriesSort',
      update: function() {
        return $.post($(this).data('update-url'), $(this).sortable('serialize'));
      }
    });
  });

  jQuery(function() {
    return $('#tasks').sortable({
      axis: 'y',
      handle: '.handle',
      update: function() {
        return $.post($(this).data('update-url'), $(this).sortable('serialize'));
      }
    });
  });

何かご意見は？--ajaxリクエストは正常に機能します。2番目のカテゴリが一番上にない限り、タスクを並べ替えることはできません。

4

1 に答える 1

1

問題は、＃tasksにID値を再利用しているためですUL。

ドキュメント内のIDを複製することはできません。http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

表示されている理由の1つ：jsとcssは、そのID値で見つかった最初の要素のみを評価し、すべてではありません。これがクラスの目的です。

http://jsfiddle.net/rlemon/xYGsA/これは、IDをクラスに変更する例です。

于 2012-09-13T15:34:54.483 に答える