1

次のような HTML ページ構造があります。

<div class="editable>CONTENT
    <span class="multiple-users">span-content</span>
    <span class="multiple-users">span-content2</span>
    <span class="multiple-users">span-content3</span>
</span>

クラス「マルチユーザー」のスパン要素をクリックすると、クラス「編集可能」のdiv内のすべてがクリックされたスパンのコンテンツに置き換えられます。クリックしたスパンのコンテンツをクリックすると、元の形式に戻り、元の div にあったすべてのものに置き換えます。

ここに私が持っているものがあります:

$(document).ready(function () {
    $('span.multiple-users').click(function () {
        var id = $(this).text().match(/[0-9]+/);
        var old_html = $(this).closest('div.editable').html();
        var instructor_obj = $(this).closest('div.editable');

        instructor_obj.html("<span id=" + id + " >Instructor ID: " + id + "</span>");

        $('#' + id).click(function () {
            $(this).closest('div.editable').html(old_html);
        });    
    });
});

しかし、これは私がやりたいこととまったく同じではありません。class="multiple-users" のスパンをクリックすると、div 内のすべてがスパン コンテンツに置き換えられ、スパン コンテンツをクリックすると、元のコンテンツに戻ります。ただし、もう一度スパンをクリックしようとすると、div 内のすべてがクリックされたスパンのコンテンツに置き換えられません。

要するに、適切にトグルしません。私のコードの何が問題なのか分かりますか?

4

2 に答える 2

0

実際には次の 2 つに分ける必要があります。

<div class="editable">
  <div class="ed-area">
    old content
  </div>
  <div class="control">
    <span>Content One</span>
    <span>Content Two</span>
    <span>Content Three</span>
  </div>
</div>

JS:

$(function(){
  var control = $("div").find(".control");
  var oldText = $(".editable").html();
  $.each(control, function(){
    var that = $(this);
    var newText = that.html();
    that.on({
      click:function(){
        var className = that.attr("class");
        if(className){
          fillin = oldText;
        } else {
          fillin = newText;
        }
        that.classToggle("selected");
        $(".editable").html(fillin);
      }
    });
  });
});
于 2013-08-23T23:28:20.330 に答える