div为数组中的每个div重叠

Question

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

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

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

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

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

我想将它定义为数组中的各个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://stackoverflow.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> 

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

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

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

谢谢你的帮助。

Answer 1

你必须应用mouseenter和mouseleave父.pagesListBtn 。 从$(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://stackoverflow.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>