Question

我正在克隆一个带有表格的div。这个div有一个BLOCK类，所以它是可见的。我希望能够在表格前面的div中有一个按钮，这样可以通过将它的类更改为隐藏类来隐藏这个克隆的div

var num = $('.class_of_div').length;
var newNum = num + 1;

每个克隆的div都有一个新的id。 DIV_1 DIV_2 DIV_3 ....每个按钮也有新的id对应的div。所以button_1 button_2 button_3 .... 标记之后的数字取自另一个类中的元素数。

这些是我的课程

.hidden{
     display: none;
 }

 .visible{
     display: block;
     margin-left: 20px;
 }

我需要用

创建一个函数

.removeClass('.visible').addClass('.hidden')

但按钮如何知道它必须更改当前div所在的类？不改变其他旧的或新的div的类别？

希望这一切都很清楚;）。

Answer 1

您可以在所有div上添加不同的ID，并执行以下操作：

$('#div1').css("display", "block");
$('#div2').css("display", "none");

显示或隐藏您想要的div。

Answer 2

如果您的按钮位于要编辑的div内，则使用jQuery的.closest()功能定位该元素不应该成为问题。

此外，当您声明事件处理程序时，您将要使用event delegation，因此它们将在所有克隆中触发。

$("body").on("click", "button", function() {
  $(this).closest("div").removeClass('.visible').addClass('.hidden');
});

请参阅下面的runnable片段以获取示例。

＆＃13;

$("#wrapper").on("click", ".hide", function() {
  $(this).closest("div").hide("slow");
});
$("#wrapper").on("click", ".clone", function() {
  $(this).closest("div").clone().appendTo("#wrapper");
});

＆＃13;

.cloneable {
  margin: 5px;
  outline: 1px solid;
  background-color: #CCC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="cloneable">
    <button class="hide">Hide</button>
    <button class="clone">Clone</button>
  </div>
</div>

＆＃13;

用按钮更改克隆div的类

2 个答案: