javascript - getElementsByClassName 问题

Question

我想在我的网站上显示一些团队员工，所以，我想显示一些小信息，例如图片和姓名，然后当您单击它时，它会弹出一个包含此人详细信息的 div。

我正在尝试通过 getElementsByClassName 来完成它，但是它不起作用，它只适用于第一个节点。

我有两个 div，一个名为“popup”的包含信息的 div 和一个不透明的全尺寸 div。

所以，这是我打开和关闭 div 的函数:

function showWindow(className,number){
var obj = document.getElementsByClassName(className);
$obj[number].fadeIn(1000);
var obj2 = document.getElementById('transparentBox');
obj2.style.display='block';
}

function closeWindow(className,number){
var obj = document.getElementsByClassName(className);
$obj[number].fadeOut("slow");
var obj2 = document.getElementById('transparentBox');
$(obj2).fadeOut(1000);
}

有趣的是，如果我点击第一个元素节点它确实有效，但它不适用于其他节点(即第一个节点 = obj[0])。对于其他的，只显示 transparentBox。

两个div的CSS:

#transparentBox
{
position: fixed;
display:none;
padding:0;
margin:0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
z-index: 499;
}
.popup {
position: absolute;
display:none;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:700px;
padding:20px;
background-color:white;
margin: auto;
z-index:500;
overflow-y: scroll;
}

我正在通过更多信息给他们打电话

但它只在第一次调用 showWindow('popup',0) 时显示，其他调用不显示弹出窗口，只显示透明框。

Answer 1

$(obj[number]) 是我认为你正在寻找的，而不是 $obj(number)。所以你的 fadeIn/fadeOut 应该变成:$(obj[number]).fadeIn(1000);