代码之家 › 专栏 › 技术社区 › pploypiti

选择所有其他ID不是“this”的元素。id'

dom html javascript

pploypiti · 技术社区 · 6 年前

我有4个元素 onclick() 只有一个 block div将显示;

HTML:

<!--elements that will toggle block div to show-->
<p onclick="expand(this.id)" id="p1"></p>
<p onclick="expand(this.id)" id="p2"></p>
<p onclick="expand(this.id)" id="p3"></p>
<p onclick="expand(this.id)" id="p4"></p>
<!--block div-->
<div id="block_p1"></div>
<div id="block_p2"></div>
<div id="block_p3"></div>
<div id="block_p4"></div>

JS公司:

function expand(e) {
document.getElementById("block_" + e).style.display = "block";
document.getElementById(e).style.backgroundColor = "#425a94";
}

问题是当我点击第一个元素之后的第二个元素时,我说点击 p2 之后 p1 ,块div-- block_p1 不会消失为 block_p2 如图所示, 单击第二个块后,如何隐藏第一个块? 如果我不使用参数,我会这样做:

function expand() {
document.getElementById("block_p2").style.display = "block";
document.getElementById("p2").style.backgroundColor = "#425a94";
document.getElementById("block_p1").style.display = "none";
}

我不知道如何在有参数的情况下做同样的事情。此外,在选择第三个元素的情况下,我还需要隐藏前两个块。

3 回复 | 直到 6 年前

gurvinder372 6 年前

你第一需要隐藏以id开头的所有div expanded_ ,只需在其余代码之前添加这一行即可。

var allExpanded = document.querySelectorAll( "div[id^='expanded_']" );
Array.from( allExpanded ).forEach( s => (s.style.display = "none") );

您的功能变成

function expand(e) 
{
    //first hide all
    var allExpanded = document.querySelectorAll( "div[id^='expanded_']" );
    Array.from( allExpanded ).forEach( s => (s.style.display = "none") );
    //then show specific
    document.getElementById("expanded_" + e).style.display = "block";

    document.getElementById(e).style.backgroundColor = "#425a94";
    document.getElementById("toolbar_expand").style.display = "block";
}

Andy 6 年前

From my previous answer ,这是一个小的修改,用于拾取可在函数中循环的所有显示元素,以删除先前添加的类:

const buttons = document.querySelectorAll('.button');
const slides = document.querySelectorAll('.slide');

buttons.forEach(button => {
  button.addEventListener('click', handleClick, false);
});

function handleClick(e) {
  const id = e.target.dataset.id;
  slides.forEach(slide => slide.classList.remove('show'));
  const slide = document.querySelector(`.slide[data-id="${id}"]`);
  slide.classList.add('show');
}

.slide {
  display: none;
}

.show {
  display: block;
}

<p class="button" data-id="1">icon1</p>
<p class="button" data-id="2">icon2</p>
<p class="button" data-id="3">icon3</p>
<div class="slide" data-id="1">blocki1</div>
<div class="slide" data-id="2">blocki2</div>
<div class="slide" data-id="3">blocki3</div>

Ankit Agarwal 6 年前

您可以使用 id 匹配选择器以获取所有 div 具有 身份证件 拥有 block_ 作为子字符串,然后隐藏除单击的子字符串以外的所有子字符串。

function expand(id) {
  document.getElementById('block_'+id).style.display = "block";
  document.getElementById(id).style.backgroundColor = "#425a94";
  document.querySelectorAll('[id^="block_"]').forEach(function(elem){
   if(elem.id !== 'block_'+id){
     elem.style.display = "none";
     var pId = elem.id.split('_')[1];
     document.getElementById(pId).style.backgroundColor = "#fff";
   }
  });
}

div{
 display: none;
}

<!--elements that will toggle block div to show-->
<p onclick="expand(this.id)" id="p1">p1 click</p>
<p onclick="expand(this.id)" id="p2">p2 click</p>
<p onclick="expand(this.id)" id="p3">p3 click</p>
<p onclick="expand(this.id)" id="p4">p4 click</p>
<!--block div-->
<div id="block_p1">P1</div>
<div id="block_p2">P2</div>
<div id="block_p3">P3</div>
<div id="block_p4">P4</div>