div 覆盖数组中的每个 div
div Overlay for every div in an array
我正在尝试制作一个简单的列表,显示数组中每个 div 的 div 叠加层,但我在定义每个 div 时遇到问题。
我当前的 java/jQuery 脚本涉及为数组中的每个对象创建一个 div 以及背景图像(我也遇到了 links 的问题。我有一个在线 link 为背景图片工作。)。
我想做的是为列表中的每个项目提供一个覆盖,然后在将来使用相同的代码提供打开 link 或显示图像预览的能力,但那是为了另一个列表。
那么,我怎样才能让叠加层为每个 div 工作,而不是由 class 执行。我能够为每个对象数组创建一个 div,其中包含我想要的所有设置以及叠加层。
您会在我的文档中找到现成函数的代码,目前 hides/shows 每个叠加层 div。
我想将其定义为数组中的 individual divs' 而不是全部。
$(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 + ")"; //
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>
我还遇到了此代码的另外两个问题。
图像 link 无效,我只是从我的 css 文件中复制并粘贴
我得到了很多 'missing strict statements everywhere' - 我通过添加 "use strict" 解决了这个问题;到我的代码。
感谢您的帮助。
您必须在 parent .pagesListBtn
上应用 mouseenter
和 mouseleave
。从$(this)
,就是.pagesListBtn
盘旋的地方,找到childrenpagesListOverlay
到show/hide吧。
$(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 + ")"; //
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>
我正在尝试制作一个简单的列表,显示数组中每个 div 的 div 叠加层,但我在定义每个 div 时遇到问题。
我当前的 java/jQuery 脚本涉及为数组中的每个对象创建一个 div 以及背景图像(我也遇到了 links 的问题。我有一个在线 link 为背景图片工作。)。
我想做的是为列表中的每个项目提供一个覆盖,然后在将来使用相同的代码提供打开 link 或显示图像预览的能力,但那是为了另一个列表。
那么,我怎样才能让叠加层为每个 div 工作,而不是由 class 执行。我能够为每个对象数组创建一个 div,其中包含我想要的所有设置以及叠加层。
您会在我的文档中找到现成函数的代码,目前 hides/shows 每个叠加层 div。
我想将其定义为数组中的 individual divs' 而不是全部。
$(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 + ")"; //
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>
我还遇到了此代码的另外两个问题。
图像 link 无效,我只是从我的 css 文件中复制并粘贴
我得到了很多 'missing strict statements everywhere' - 我通过添加 "use strict" 解决了这个问题;到我的代码。
感谢您的帮助。
您必须在 parent .pagesListBtn
上应用 mouseenter
和 mouseleave
。从$(this)
,就是.pagesListBtn
盘旋的地方,找到childrenpagesListOverlay
到show/hide吧。
$(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 + ")"; //
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>