>source

일련의 제품이 포함 된 웹 사이트를 개발하고 있습니다. 각 블록에는 특정 제품이 포함되어 있습니다. 마우스를 마우싱 할 때이 제품의 이름이 나타나야합니다.

그러나 제품 이름은 '데이터'속성을 통해 저장됩니다. 예 :

데이터 전송 -항목= "흰색 티셔츠"

이 데이터 속성의 값을 수집하고 내가 탑승 할 때마다 나타나야합니다.

그들은 블록 모음이므로 페이지의 모든 데이터 범죄 항목에서 수집해야합니다.

추신 : 첫 번째 블록에서만이 값을 수집하는 스크립트를 만들었습니다. 데이터 범례 항목이 포함되어 있습니다.

[

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를 사용하여 숨기고 숨기는 것을 선호합니다.

    항상 사용합니다신분증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>

  • 답변 # 2

    CSS를 사용하여 숨기고 숨기는 것을 선호합니다.

    항상 사용합니다신분증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>

  • 이전 "앱 패키지를 구문 분석하는 오류" Windows 10 .AppInstaller 파일을 Web (MSIX)에서 열 때
  • 다음 패키지 을 제공하는 모듈을위한 누락 된 Go.Sum 항목