时间戳

首页 > 解决方案 > 循环遍历 2 数组并使用 onclick 获取项目

javascript - 循环遍历 2 数组并使用 onclick 获取项目

问题描述

我有一个带有重复块的模板，每次单击 .id_name 时，idia 都会切换壁橱 .products_block，我该怎么做？例如，如果我单击第三个 .id_name，我只想切换第三个 .products_block。

我抓住了元素

const elem  = document.getElementsByClassName('id_name');
const prod  = document.getElementsByClassName('products_block');

做一个数组

const elemArray = Array.prototype.slice.call(elem)
const prodArray = Array.prototype.slice.call(prod)

<div class="id_name">
     <p>onlcik</p>
     <div class="products_block">
         <p>show</p>
     </div>
 </div>

<div class="id_name">
     <p>onlcik</p>
     <div class="products_block">
         <p>show</p>
     </div>
 </div>

....

标签： javascript

解决方案

这是你想要的 ？http://jsfiddle.net/mp2xL1uc/

var idArr = Array.from(document.getElementsByClassName('id_name'));

idArr.forEach(idEl => {
  Array.from(idEl.children)[0].addEventListener('click', function(e){
    if(Array.from(idEl.children)[1].style.display === 'none'){
      Array.from(idEl.children)[1].style.display = 'block';
    }
    else{
      Array.from(idEl.children)[1].style.display = 'none';
    }
  });
});

HTML：

<div class="id_name">
     <p>onlcik</p>
     <div class="products_block" style="display: none;">
         <p>show</p>
     </div>
 </div>

<div class="id_name">
     <p>onlcik</p>
     <div class="products_block" style="display: none;">
         <p>show</p>
     </div>
 </div>

推荐阅读