javascript - 如果 p 值 == 字符串不起作用

Question

我开始使用 jQuery 学习 javascript。

我有以下代码:

$(document).ready(function(){
    $("#p1").click(function(){

        var input = document.getElementById("p3");

        if (input.value == "Hi")
        {
            message = "Bye";
        } else {
            message = "Hi";
        }

        $("#p3").text(message);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">

    <p id="p1">Click on me.</p>
    <p id="p2">Click on me again.</p>
    <p id="p3">Click on me one more time.</p>

</div>
    

它在 p1 中第一次单击时有效，但是当我再次单击时它不会更改为“再见”

Answer 1

这是一个paragraph，而不是一个输入，因此.value不能提供您需要的内容。而是使用 .textContent。

$(document).ready(function() {
  $("#p1").click(function() {

    var input = document.getElementById("p3");

    if (input.textContent == "Hi") {
      message = "Bye";
    } else {
      message = "Hi";
    }

    $("#p3").text(message);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">

  <p id="p1">Click on me.</p>
  <p id="p2">Click on me again.</p>
  <p id="p3">Click on me one more time.</p>

</div>

<小时/>

这是一个非 jQuery 版本:

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector("#p1").addEventListener("click", function() {
    var p3 = document.getElementById("p3");
    p3.textContent = p3.textContent == "Hi" ? "Bye" : "Hi";
  });
});

<div id="div1">
  <p id="p1">Click on me.</p>
  <p id="p2">Click on me again.</p>
  <p id="p3">Click on me one more time.</p>
</div>