Question

我正在申请打字。用户按下空格键并清除文本框后，我将匹配文本框中的输入内容。但是，如何处理多个p标签，因为我不想使用太多（如果没有的话）。这是我的第一个p1标签，周围有多个p标签。我还需要为其他连续标签重复此功能。

function search(ele) {
            document.getElementById("p1").style.backgroundColor = "yellow";
            if (event.keyCode === 32) {
                if (ele.value == "ਪਰ") {
                    document.getElementById("p1").style.backgroundColor = "green";
                }
                else {
                    document.getElementById("p1").style.backgroundColor = "red";
                }
                document.getElementById("textvalue").value = "";
            }
        }

 <span style="margin-left:8px;"> <input type="text" id="textvalue" size="50" onkeydown="search(this)"  /></span>

以下是p标签：

 <table>
                        <tr>
                            <td>
                                <p id="p1">ਪਰ </p>

                            </td>

                            <td>
                                <p id="p2">ਕਰ </pid="p1">
                            </td>
                            <td>
                                <p id="p3">ਤਕ </p>
                            </td>
                            <td>
                                <p id="p4">ਤਪ </p>
                            </td>
                            <td>
                                <p id="p5">ਚਰਚ </p>
                            </td>
                            <td>
                                <p id="p6">ਰਕਤ </p>
                            </td>
                            <td>
                                <p id="p7">ਪਰਤ </p>
                            </td>
                            <td>
                                <p id="p8">ਪਰਕੋ </p>
                            </td>
                            <td>
                                <p id="p9">ਚਤਰ </p>
                            </td>
                            <td>
                                <p id="p10">ਤਰਕ </p>
                            </td>
                            <td>
                                <p id="p11">ਚਟਪਟ</p>
                            </td>


                        </tr>
</table>

Answer 1

我不确定您要达到什么目标，但是您可能正在寻找类似的东西：

function search(ele) {
  if (event.keyCode === 32) {
    let ps = document.getElementsByClassName('pstyled');
    for (let i = 0; i < ps.length; i++) {
      ps[i].style.backgroundColor = "yellow"; // Not sure whats the yellow here for, since the element will be either green or red anyways.
      if (ele.value == ps[i].textContent) {
        ps[i].style.backgroundColor = "green";
      } else {
        ps[i].style.backgroundColor = "red";
      }
    }
    document.getElementById("textvalue").value = "";
    event.preventDefault(); //prevents adding space after the function is run
  }
}

<span style="margin-left:8px;"> <input type="text" id="textvalue" size="50" onkeydown="search(this)"  /></span>

<table>
  <tr>
      <td>
          <p id="p1" class="pstyled">ਪਰ</p>
      </td>
      <td>
          <p id="p2" class="pstyled">ਕਰ</p>
      </td>
      <td>
          <p id="p3" class="pstyled">ਤਕ</p>
      </td>
      <td>
          <p id="p4" class="pstyled">ਤਪ</p>
      </td>
      <td>
          <p id="p5" class="pstyled">ਚਰਚ</p>
      </td>
      <td>
          <p id="p6" class="pstyled">ਰਕਤ</p>
      </td>
      <td>
          <p id="p7" class="pstyled">ਪਰਤ</p>
      </td>
      <td>
          <p id="p8" class="pstyled">ਪਰਕੋ</p>
      </td>
      <td>
          <p id="p9" class="pstyled">ਚਤਰ</p>
      </td>
      <td>
          <p id="p10" class="pstyled">ਤਰਕ</p>
      </td>
      <td>
          <p id="p11" class="pstyled">ਚਟਪਟ</p>
      </td>
  </tr>
</table>

正如我在评论中所说：

向每个p元素添加类（从技术上讲，您可以按标签查询，但页面上可能还有更多<p>标签）
使用document.getElementsByClassName()返回元素数组
循环遍历数组

如何使用JavaScript递归调用函数？

1 个答案: