1

我有一个功能应该在每次克隆元素时创建一个按钮。问题是它正在向该 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的 's，我已将 'sdata-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 回答