收集属性值并将其显示在 DOM whit JavaScript 中

Question

我正在开发一个包含一系列产品的网站，每个块包含特定产品，当鼠标悬停时我需要显示该产品的名称，

但是，产品名称是通过 '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

Answer 1

我更喜欢使用 CSS 隐藏和显示，看看这个。

总是在 html 文件中只使用一次 id 名称

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>

收集属性值并将其显示在 DOM whit JavaScript 中

Collect Attribute values and display it in the DOM whit JavaScript

html

javascript

css

attributes

收集属性值并将其显示在 DOM whit JavaScript 中

Collect Attribute values ​and display it in the DOM whit JavaScript

html

javascript

css

attributes

Collect Attribute values and display it in the DOM whit JavaScript