我有一个带有重复块的模板,每次单击.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>
....
答案 0 :(得分:0)
这是您要寻找的东西吗? 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>
答案 1 :(得分:0)
尝试一下
"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'
项,但要显示为默认项的项除外。