Question

我有一个函数，应该在每次克隆元素时创建一个按钮。问题是它正在为该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>

Answer 1

我会做这样的事情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;
  });

阻止jquery添加链接...

1 个答案: