Question

我有一个带有重复块的模板，每次单击.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>

....

Answer 1

这是您要寻找的东西吗？ How to get current timestamps in Java

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>

Answer 2

尝试一下

            "properties": {
            "copy": [
                {
                    "name": "ipconfigurations",
                    "count": "[parameters('niccount')]",
                    "input": {
                        "name": "[concat('ipconfig',copyIndex('ipconfigurations'))]",
                        "properties": {
                            "privateIPAllocationMethod": "Static",
                            "privateIPAddress": "[parameters('ips').ipConfigurations[copyIndex('ipconfigurations')].properties.privateIPAddress]",
                            "subnet": {
                                "id": "[parameters('subnetRef')]"
                            },
                            "primary": "[equals(copyIndex('ipconfigurations'),0)]"
                        }
                    }
                }
            ]
        }

var links = Array.from(document.getElementsByClassName('id_name'));

// hide a specific element
var hideProduct = (elem) => { elem.style.display = 'none'; }

// click handler 
var onClik = (index, event) => {
  // make clicked element products visible
  links[index].children.item(1).style.display = 'block';
  
  // filter rest of the sections and hide'em
  let filtered = links.filter((item) => item != links[index]);
  filtered.forEach((v,i) => hideProduct(v.children.item(1)))
};


// add click handler to clickables as suggested
links.forEach((el, index) => {
  Array.from(el.children)[0].addEventListener('click', (e) => onClik(index, e));
});

.id_name > p:first-child { color: blue; text-decoration: underline; cursor: pointer;}

如果要显示一个并默认隐藏所有内容，只需添加<div class="id_name"> <p>onlcik</p> <div class="products_block"> <p>show 1</p> </div> </div> <div class="id_name"> <p>onlcik</p> <div class="products_block"> <p>show 2</p> </div> </div> <div class="id_name"> <p>onlcik</p> <div class="products_block"> <p>show 3</p> </div> </div> <div class="id_name"> <p>onlcik</p> <div class="products_block"> <p>show 4</p> </div> </div> <div class="id_name"> <p>onlcik</p> <div class="products_block"> <p>show 5</p> </div> </div> <div class="id_name"> <p>onlcik</p> <div class="products_block"> <p>show 6</p> </div> </div>即可添加style = 'display:none'项，但要显示为默认项的项除外。

循环遍历2个数组，并使用onclick作为项目

2 个答案: