单击输入框时，需要显示我的段落。 我的p数组如何不循环遍历我的段落变量？

Question

我试图遍历我的p数组以找到每个段落变量，以便可以更改HTML的不透明度。

var p1 = document.querySelector(".p1");
var p2 = document.querySelector(".p2");
var p3 = document.querySelector(".p3");

var p = [1,2,3];
function visible() {
    for (var i = 0; i < p.length; i++) {
        p[i].style.opacity = 1;
    }

 }

我要查找的结果是当我单击要显示段落的输入文本框时。 可见函数是html onclick函数。

Answer 1

我想你是说

var p = [p1,p2,p3];

不

var p = [1,2,3];

已编辑

您可以在html中添加参数。

<input type="number" onclick="displayParagraph('.p1')">
<input type="number" onclick="displayParagraph('.p2')">
<input type="number" onclick="displayParagraph('.p3')">

function displayParagraph(paragraphClass){
var p = document.querySelector(paragraphClass);
p.style.opacity = 1;
}

Answer 2

 let p1 = document.getElementsByClassName("p1"); let p2 = document.getElementsByClassName("p2"); let p3 = document.getElementsByClassName("p3"); let pArray = []; pArray.push(p1,p2,p3); setTimeout(()=>{ pArray.map((x)=>{ x[0].style.opacity =1 }) },0); 

现在，我们必须使用setTimeout函数，因为p1和p2和p3对于您的JavaScript文件中的DOM仍然是未知的。 例如，如果您将使用JQuery并将代码放入$（document）.ready（）{}函数中，它将是已知的。