1

要素が複製されるたびにボタンを作成する機能があります。問題は、すでに div があるにもかかわらず、その div 内のすべての要素にボタンを追加していることです。これは簡単な作業だと思いますが、頭を悩ませるだけです。 

<h1>skapa ett moment</h1>

<?php foreach($rows as $r) : ?>

    <div class="span6 part">
        <button id="add_part" class="btn-mini btn pull-right">Lägg till</button>
        <div class="moment_content">
            <h1 class="part_heading"><?php echo $r->title; ?></h1>
            <h4 id="id" style="display:none;" class="pull-left"><?php echo $r->id;?></h4>
            <div class=""><?php echo $r->content; ?></div>
        </div>
    </div>

    <div id="result" class="span3 pull-right">
    </div>

<?php endforeach; ?>

    <script type="text/javascript">
        var knapp = $('.part').find('.btn').hide();
        $('.part').hover(function(){
            $(this).toggleClass('well');
            $(this).children('.btn').toggle();
        });


        $('button#add_part').on('click', function(){
            var add = $(this).next().clone().appendTo('#result');
            if ($('<a class="btn-mini pull-right btn" href="#">ta bort</a>').length > 0)
            {
                $('<a class="btn-mini pull-right btn" href="#">ta bort</a>').insertBefore('#result .part_heading');
            } 
            if ($('<a class="btn-mini pull-right btn" href="#">ta bort</a>').length > 1){
                $('#result a.btn').remove();
            } 
        });


    </script>
4

1 に答える 1

2

私はこのjsBin live exampleのようなことをします

機能するには、いくつかの変更が必要です。

  • idすべてのを削除
  • btn-add-partボタンにクラスとして追加する
  • <h4>取り外し可能なリンクで変更
  • 追加された にアクセスしたい場合は、ブロックの一部としてidを含めましたdata-content-id<div>
  • ループの外側に置き<div id="result">ます（結局のところ、それがあなたが望んでいることだと思います

また、フォローしやすいように少しスタイルを整えました...

jQuery コードは基本的に次のとおりです。

$(function(){

  // hide all "ADD" buttons
  $(".btn-add-part").hide();

  // on mouse over .part
  $(".part").hover(function() {
      $(this).toggleClass("well").find(".btn-add-part").stop().fadeToggle();
    });

  // on "ADD" click
  $(".btn-add-part").click(function() {
    // clone DOM block
    var block = $(this).closest(".part").find(".moment_content").clone(); 
    // show remove link
    block.find(".btn-rem-part").show(); 
    // append to result
    block.appendTo("#result"); 
  });

  // on "REMOVE" click
  $(".btn-rem-part").live("click", function() {
    $(this).closest(".moment_content").fadeOut("slow", function() { 
       // Now that faded, let's remove it...
       $(this).remove(); 
    });
  });

});

保存ボタンを追加

  // on "SAVE"
  $(".btn-Save").click(function() {
    // empty?
    if($("#result").length > 0) {

      var r = "";
      $("#result").find(".moment_content").each(function() {
        // for each block added
        if(r.length > 0) r += ", ";
        r += $(this).attr("data-content-id");
      });

      alert("Submiting the following ID's: " + r);
      return true;

    }
    alert('Nothing to save...');
    return false;
  });
于 2012-04-25T11:32:18.870 に答える