javascript - 收集属性值并将其显示在 DOM whit JavaScript
问题描述
我正在开发一个包含一系列产品的网站,每个区块都包含一个产品,当鼠标悬停时我需要这个产品的名称出现,
但是,产品名称是通过“DATA”属性存储的。例如:
data-legend-item = "白色 T 恤"
我需要收集这个数据属性的值,并让它在每次我将鼠标悬停在它上面时出现。
记住它们是块的集合,所以我需要从页面上的所有数据图例项中收集它们。
ps:请注意,我制作的脚本仅从包含数据图例项的第一个块中收集此值
[
function dataTitleProduct(productItem) {
// collecting data-legend-item main attribute
var productItem = document.getElementById('item-title').getAttribute("data-legend-item");
// pulling the value of the data-legend-item attribute and inserting it in the html
document.querySelector('[data-legend-item]').innerHTML = productItem;
}
dataTitleProduct();
.products {
/* Div pai*/
max-width: 320px;
width: 100%;
}
/* Filhos recebendo distanciamento de 5 margin*/
.products .product-view {
margin: 5px auto;
}
/* */
.products .product-view {
max-width: 200px;
display: flex;
flex-flow: column wrap;
text-align: center;
margin: 0 auto;
}
.product-view .product {
height: 150px;
background-color: #ffffff;
box-shadow: 0 1px 3px #c7c7c7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all .3s ease;
position: relative;
}
.product-view .product:hover {
box-shadow: 0 7px 7px rgba(90, 90, 90, 0.2);
cursor: pointer;
content: '';
}
/* Titulo do Produto*/
.product-view .product [data-legend-item] {
display: block;
line-height: 220px;
position: relative;
font-size: 1.1rem;
color: #ffffff;
z-index: 1;
}
.product-view .product [data-legend-item]:before {
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 90px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
content: '';
}
<div class="products">
<div class="product-view">
<div id="item" class="product">
<div id="item-title" data-legend-item="T-shirt White"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div id="item-title" data-legend-item="Shoes"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div id="item-title" data-legend-item="Black T-shirt"></div>
</div>
</div>
</div>
] 1
解决方案
我更喜欢使用 CSS 来隐藏和显示,看看这个。
总是id
在 html 文件中只使用一次名称
document.querySelectorAll('.product-view').forEach(e => {
e.addEventListener('mouseover', event => {
let item_title = event.currentTarget.querySelector('.item-title');
item_title.innerText = item_title.dataset.legendItem;
});
e.addEventListener('mouseout', event => {
let item_title = event.currentTarget.querySelector('.item-title');
item_title.innerText = '';
})
})
.products {
/* Div pai*/
max-width: 320px;
width: 100%;
}
/* Filhos recebendo distanciamento de 5 margin*/
.products .product-view {
margin: 5px auto;
}
/* */
.products .product-view {
max-width: 200px;
display: flex;
flex-flow: column wrap;
text-align: center;
margin: 0 auto;
}
.product-view .product {
height: 150px;
background-color: #ffffff;
box-shadow: 0 1px 3px #c7c7c7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all .3s ease;
position: relative;
}
.product-view .product:hover {
box-shadow: 0 7px 7px rgba(90, 90, 90, 0.2);
cursor: pointer;
content: '';
}
/* Titulo do Produto*/
.product-view .product [data-legend-item] {
display: block;
line-height: 220px;
position: relative;
font-size: 1.1rem;
color: #ffffff;
z-index: 1;
}
.product-view .product [data-legend-item]:before {
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 90px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
content: '';
}
<div class="products">
<div class="product-view">
<div id="item" class="product">
<div class="item-title" data-legend-item="T-shirt White"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div class="item-title" data-legend-item="Shoes"></div>
</div>
</div>
<div class="product-view">
<div id="item" class="product">
<div class="item-title" data-legend-item="Black T-shirt"></div>
</div>
</div>
</div>
推荐阅读
- css - Vue.js 阻止 classList.remove 工作?
- javascript - ASP.NET 每 10 秒触发一次来自 javascript 的 CallbackPanel 回调
- python - 如何在 Python 中阻止对实例变量的外部修改?
- java - 当应用程序在具有不同本地 IP 的不同本地计算机上运行时如何在 Nginx 中代理传递
- ms-access - MS ACCESS 列表框显示数字而不是字符
- apache-spark - 跨多个 python 脚本的 Spark 表可见性
- node.js - 如何在 pug 模板中迭代这个 mongodb json
- php - PHP + MySQL:如何知道 UPDATE 查询何时与 WHERE 语句不匹配?
- python-3.x - redis - 如何创建事务
- quartz.net - 如何在 IIS 中优雅地结束带有 ASP.NET Core 2.2 作业的 Quartz 3.0.x?