Question

我有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";
}

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

Answer 1

首先需要隐藏以id expanded_开头的所有div，只需在其余代码之前添加此行。

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";
}

Answer 2

From my previous answer，一个小修正案，用于获取所有可以在函数中循环的显示元素，以删除之前添加的类：

＆＃13;

color: #000000;

＆＃13;

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');
}

＆＃13;

.slide {
  display: none;
}

.show {
  display: block;
}

＆＃13;

Answer 3

您可以使用id匹配选择器获取div id 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>

DELETE FROM tablename 
WHERE  user_id IN (SELECT user_id 
                   FROM   tablename 
                   WHERE  state = "left")

选择所有其他ID不是＆＃39; this.id＆＃39;

3 个答案: