Question

我有这段代码，

HTML和php

<?php for($i = 1; $i <= 5; $i++) { ?>
  <div class="file-add-row" style="display:none;">Some content</div>
<?php } ?>
<div id="add-file-plus">Add File</div>

和JS是

$('#add-file-plus').live('click', function () {
  if($('div.file-add-row:visible').length == 0) {
    $('div.file-add-row:hidden:first').show();
  } else {
    $('.file-add-row:hidden:first').removeAttr("style").insertAfter($('.file-add-row:visible:last'));           
    }
});

现在，我的问题是，当我第一次点击添加按钮时，会显示第一个'file-add-row'div。但是当我第二次点击添加按钮时，页面上没有任何反应。相反，它只是从dom中完全删除了div。

我只是jquery的初学者，所以可能会有一些我忽略的事情。任何人都知道发生了什么事？

Answer 1

当你这样做时：

$('.file-add-row:visible:last')

就在之后：

$('.file-add-row:hidden:first').removeAttr("style")

它们都指向同一个对象。如果你试图在它自己之后插入一个对象，它最终会从DOM中删除它。

将JS更改为：

$('#add-file-plus').live('click', function () {
  if($('div.file-add-row:visible').length == 0) {
    $('div.file-add-row:hidden:first').show();
  } else {
    var last_visible = $('.file-add-row:visible:last')
    $('.file-add-row:hidden:first').removeAttr("style").insertAfter(last_visible);       
  }
});

演示（点击'添加文件'）： https://jsfiddle.net/woxd2jbf/1/

Answer 2

这是一个没有jQuery的版本，只是普通的JavaScript，它可以像div一样使用div，ul和li。细节在来源中进行了评论。

关键方法

PLUNKER

段

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <!--This <li> is a template to clone-->
  <li class="row" style='display:none'>Some content</li>
  <!--This is the empty list to be populated with clones-->
  <ul id='list'>

  </ul>
  <!--This button will have an eventListener 
that will execute a function when it is clicked-->
  <button id="add">Add File</button>

  <script>
    /* Reference each element involved in process */
     // The button
    var add = document.getElementById('add');
     // The list
    var list = document.getElementById('list');
     // The first li
    var row = document.querySelector('.row:first-of-type');

    /* 
      1. Button will listen for a `click`
      2. Create a clone of the first li
      3. Add clone as the last child of list
      4. Set clone's display property to block 
      so it's visible
    */
    add.addEventListener('click', function(e) {

      var clone = row.cloneNode(true);
      list.appendChild(clone);
      clone.style.display = 'block';

    }, false);
  </script>
</body>

</html>

Answer 3

$（'。file-add-row：hidden：first'）。removeAttr（“style”）。insertAfter（$（'。file-add-row：visible：last'））; ，由于这条线，问题正在发生。因为它首先删除了样式属性，使其可见，因此 $（'。file-add- row：visible：last'）正在返回。重构器存储可见el的引用，如下所示：

CREATE TABLE T ( X INT NOT NULL, Y INT NOT NULL, Z INT NOT NULL ); ALTER TABLE T ADD PRIMARY KEY NONCLUSTERED(X); --Unique constraint NONCLUSTERED would be the default anyway ALTER TABLE T ADD UNIQUE NONCLUSTERED(Y); CREATE UNIQUE CLUSTERED INDEX ix ON T(Z); DROP TABLE T;

show（）方法从dom中删除html元素而不是显示它

3 个答案:

关键方法

段