Question

整个stackoverflow社区的白天或黑夜！（特别是那些正在读这篇文章的人）

事情是我有一个大容器。
用户点击后会将几个固定高度的div添加到其中。
这些div中包含标题块和描述块。

最后我需要他们的描述块有变换：translateY（dynamicHeight），其中dynamicHeight是它们的高度值，它依赖于标题块高度（标题高度不是所有项目的通用。每个项目可能有自己的标题高度）。（整体div高度为200px，如果标题块高度为53px，则描述块应为剩余的147px）

＆＃13;

$(function () {
  var itemsNumber = 4; //Say, I've got this number of items from a database.

  $("#btn").on("click", function () {
    for (i=0; i < itemsNumber; i++) {
      $("#container").append($("<div class=\"item\" id=" + i + "><div class=\"moving\"><div class=\"header\">Hi! I'm header.</div><div class=\"description\">Howdy. I am the content.</div></div></div>"));
    }
  });
});

＆＃13;

#btn {
  background-color: green;
  color: black;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 16px;
  padding: 10px 30px;
 }
 
 #container {
  border: 1px solid #aaa;
  display: flex;
  justify-content: space-between;
  min-height: 150px;
  padding: 10px;
  width: 550px;
 }
 
 .item {
  border: 1px solid #999;
  height: 200px; 
  overflow: hidden;
  width: 120px;
 }
 
 .moving {
  transform: translateY(147px); /* Need to calculate this value using jQuery or vanilla JavaScript (itemHeight - headerHeight) but have no idea how to do it, because items are added dynamically.. */
  transition: transform .4s ease-in-out;
 }
 
 .item:hover .moving {
  transform: translateY(0);
 }
 
 .moving div {
  padding: 10px;
  text-align: center;
 }
 
 .header {
  background-color: red;
  height: 53px; /* This value isn't going be the same for each item */
  text-transform: uppercase;
 }
 
 .description {
  background-color: blue;
  color: white;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div> <!-- Items are added to this div -->

＆＃13;

Answer 1

您可以像$("#container").height() - $(".header").height();一样计算动态高度，并使用此函数$(document).on("mouseenter", ".item", function()将hover evcent绑定到动态创建的元素

$(function() {
  var itemsNumber = 4; //Say, I've got this number of items from a database.

  $("#btn").on("click", function() {
    for (i = 0; i < itemsNumber; i++) {
      $("#container").append($("<div class=\"item\" id=" + i + "><div class=\"moving\"><div class=\"header\" >Hi! I'm header.</div><div class=\"description\" >Howdy. I am the content.</div></div></div>"));


    }
    var hei = $("#container").height() - $(".header").height();
    $(".moving").css("transform", "translateY(" + hei + "px)"); //translate using  dynamic height
    $(".description").css("height", hei-2+"px"); //set height of description dynamically
  });

  $(document).on("mouseenter", ".item", function() {
    $(this).find(".moving").css("transform", "translateY(0)");
    $(this).find(".moving").css("transition", " transform .4s ease-in-out");
  });

  $(document).on("mouseleave", ".item", function() {
    var hei = $("#container").height() - $(".header").height();
    $(this).find(".moving").css("transform", "translateY(" + hei + "px)");
    $(this).find(".moving").css("transition", " transform .4s ease-in-out");
  });



});

#btn {
  background-color: green;
  color: black;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 16px;
  padding: 10px 30px;
}

#container {
  border: 1px solid #aaa;
  display: flex;
  justify-content: space-between;
  min-height: 150px;
  padding: 10px;
  width: 550px;
}

.item {
  border: 1px solid #999;
  height: 200px;
  overflow: hidden;
  width: 120px;
}

.moving div {
  padding: 10px;
  text-align: center;
}

.header {
  background-color: red;
  height: 53px;
  /* This value isn't going be the same for each item */
  text-transform: uppercase;
}

.description {
  background-color: blue;
  color: white;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div>
<!-- Items are added to this div -->

P.S。同样动态设置description的高度$(".description").css("height", hei-2+"px"); -2px 1px item container和RelatedModel

为动态附加的div应用转换

1 个答案: