單擊輸入框時，需要顯示我的段落。 我的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（）{}函數中，它將是已知的。