Я пытаюсь сделать простой список, который показывает мне наложение 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>Я также испытываю две другие проблемы с этим кодом.
Ссылки на изображения не работают, я просто скопировал и вставил из моего файла css
Я получаю много «отсутствующих строгих утверждений везде» - я исправил это, добавив «использовать строгие»; к моему коду.
Спасибо за вашу помощь.
