div为数组中的每个div重叠

I'm trying to make a simple list that shows me a div overlay for every div in the array, but I am having problems defining each div.

我正在尝试创建一个简单的列表,向我显示数组中每个div的div叠加,但我在定义每个div时遇到问题。

My current java/jQuery script involves creating a div for each object in the array along with a background image (which I am also have trouble with links. I got an online link working for the background image though.).

我当前的java / jQuery脚本涉及为数组中的每个对象创建一个div以及一个背景图像(我也遇到链接问题。虽然我有一个在线链接工作的背景图片。)。

What I want to do is provide an overlay for every item in the list and then in the future use the same code to provide the ability to open a link or show an image preview, but that's for another list.

我想要做的是为列表中的每个项目提供一个叠加层,然后在将来使用相同的代码来提供打开链接或显示图像预览的功能,但这是另一个列表。

So, how can I get the overlay working for each div rather than acting by class. I was able to create a div with all my desired settings for each object array, along with the overlay.

那么,我怎样才能让叠加层适用于每个div而不是按类进行操作。我能够为每个对象数组创建一个包含所有所需设置的div,以及叠加层。

You will find in my document ready function the code that currently hides/shows every overlay div.

您将在我的文档就绪函数中找到当前隐藏/显示每个叠加div的代码。

I want to define this to individual divs' in the array rather than all.

我想将它定义为数组中的各个div而不是全部。

$(document).ready(function() { 
  displayDesign();
  $( ".pagesListOverlay" ).mouseenter(function() {
    $( ".pagesListOverlay" ).hide()  ;
  });
});
var arrayVariableDesign = [
  {name: "object1", type:"type1", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object2", type:"type1", company:"company1", dateYear:"2017", dateMonth:"01", dateDay:"20", image:"../images/preview/noimg.png"},
  {name: "object3", type:"type2", company:"company2", dateYear:"2016", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object4", type:"type3", company:"company3", dateYear:"2016", dateMonth:"03", dateDay:"04", image:"../images/preview/noimg.png"},
  {name: "object5", type:"type1", company:"company2", dateYear:"2017", dateMonth:"02", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object6", type:"type2", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"20", image:"../images/preview/noimg.png"},
];
var arrayLength_Design = arrayVariableDesign.length;
var temp_Design;
    
function displayDesign() {
    
  for (i = 0; i < arrayLength_Design; i++) { 
    var sortDate_Design = arrayVariableDesign[i].dateYear + arrayVariableDesign[i].dateMonth + arrayVariableDesign[i].dateDay;
    temp_Design = document.createElement('div');
    temp_Design.className = 'pagesListBtn mobilePagesListBtn';
    temp_Design.style.background = "url(" + arrayVariableDesign[i].image.src + ")"; // https://*.com/questions/9790347/set-an-image-object-as-a-div-background-image-using-javascript
    temp_Design.style.backgroundSize = "100%";
    temp_Design.style.backgroundRepeat = "no-repeat";
    temp_Design.style.backgroundPosition = "50% 50%";
    temp_Design.style.backgroundColor = "#C02024";
    temp_Design.innerHTML = "<div class='pagesListOverlay mobilePagesListOverlayBtn'>" + arrayVariableDesign[i].name + " for " + arrayVariableDesign[i].company + "<br>" + arrayVariableDesign[i].type + "<br>" + arrayVariableDesign[i].dateDay + "/" + arrayVariableDesign[i].dateMonth + "/" + arrayVariableDesign[i].dateYear + "</div>";
    document.getElementById("demo").appendChild(temp_Design);
  }
}

.pagesListBtn {
  z-index: 500;
  background-color: #C02024;  
  display: inline-block;         
}

.pagesListBtn:hover {
  background-color: #920400;    
}

.pagesListOverlay {
  padding-top: 0;
  margin: 0 auto;
  opacity: 0.8;
  display: inherit;
  background-color: white; 
  text-align: center;
  vertical-align: bottom;
  text-decoration:none;
  font-weight:900;
  line-height:30px;
}

.mobilePagesListBtn {
  min-height:150px;
  max-height:150px;
  width: 100%; /*295px*/
  padding: 0;
  margin-top: 25px;
  margin-bottom: -15px;
}

.mobilePagesListOverlayBtn {
  min-height:150px;
  max-height:150px;
  width: 100%; /*295px*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div id="demo"></div>

I am also experiencing two other problems with this code.

我也遇到了这个代码的另外两个问题。

1. The image links are not working, I just copied and pasted from my css file

   图像链接不起作用,我只是从我的css文件中复制并粘贴

2. I get a lot of 'missing strict statements everywhere' - I fixed this by adding "use strict"; to my code.

   我得到了很多'到处都缺少严格的陈述' - 我通过添加“use strict”来解决这个问题。到我的代码。

Thanks for your help.

谢谢你的帮助。

1 个解决方案

#1

You have to apply the mouseenter and mouseleave on the parent .pagesListBtn. From $(this), wich is the .pagesListBtn hovered, find the children pagesListOverlay to show/hide it.

您必须在父.pagesListBtn上应用mouseenter和mouseleave。从$(this)开始,这是.pagesListBtn,找到子pagesListOverlay来显示/隐藏它。

$(document).ready(function() { 
  displayDesign();
  $( ".pagesListBtn" ).mouseenter(function() {
    $( this ).find(".pagesListOverlay").fadeOut(800)  ;
  });
  $( ".pagesListBtn" ).mouseleave(function() {
    $( this ).find(".pagesListOverlay").fadeIn(800)  ;
  });
  
  
});
var arrayVariableDesign = [
  {name: "object1", type:"type1", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object2", type:"type1", company:"company1", dateYear:"2017", dateMonth:"01", dateDay:"20", image:"../images/preview/noimg.png"},
  {name: "object3", type:"type2", company:"company2", dateYear:"2016", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object4", type:"type3", company:"company3", dateYear:"2016", dateMonth:"03", dateDay:"04", image:"../images/preview/noimg.png"},
  {name: "object5", type:"type1", company:"company2", dateYear:"2017", dateMonth:"02", dateDay:"24", image:"../images/preview/noimg.png"},
  {name: "object6", type:"type2", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"20", image:"../images/preview/noimg.png"},
];
var arrayLength_Design = arrayVariableDesign.length;
var temp_Design;
    
function displayDesign() {
    
  for (i = 0; i < arrayLength_Design; i++) { 
    var sortDate_Design = arrayVariableDesign[i].dateYear + arrayVariableDesign[i].dateMonth + arrayVariableDesign[i].dateDay;
    temp_Design = document.createElement('div');
    temp_Design.className = 'pagesListBtn mobilePagesListBtn';
    temp_Design.style.background = "url(" + arrayVariableDesign[i].image.src + ")"; // https://*.com/questions/9790347/set-an-image-object-as-a-div-background-image-using-javascript
    temp_Design.style.backgroundSize = "100%";
    temp_Design.style.backgroundRepeat = "no-repeat";
    temp_Design.style.backgroundPosition = "50% 50%";
    temp_Design.style.backgroundColor = "#C02024";
    temp_Design.innerHTML = "<div class='pagesListOverlay mobilePagesListOverlayBtn'>" + arrayVariableDesign[i].name + " for " + arrayVariableDesign[i].company + "<br>" + arrayVariableDesign[i].type + "<br>" + arrayVariableDesign[i].dateDay + "/" + arrayVariableDesign[i].dateMonth + "/" + arrayVariableDesign[i].dateYear + "</div>";
    document.getElementById("demo").appendChild(temp_Design);
  }
}

.pagesListBtn {
  /*z-index: 500;*/
  background-color: #C02024;  
  /*display: inline-block;*/
  display:block;
}

.pagesListBtn:hover {
  background-color: #920400;    
}

.pagesListOverlay {
  padding: 0;   /* changed */
  margin: 0;    /* changed */
  height: 150px;    /* added */
  opacity: 0.8;
  display: inherit;
  background-color: white; 
  text-align: center;
  vertical-align: bottom;
  text-decoration:none;
  font-weight:900;
  line-height:30px;
}

.mobilePagesListBtn {
  height: 150px;      /* added */
  /*min-height:150px; 
  max-height:150px;*/
  width: 100%; /*295px*/
  padding: 0;
  margin-top: 25px;
  /*margin-bottom: -15px;*/
}

.mobilePagesListOverlayBtn {
  /*min-height:150px;
  max-height:150px;*/
  padding:0;    /* added */
  height: 150px;
  width: 100%; /*295px*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div id="demo"></div>