如果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，而不是input，所以.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>

---

这是一个no-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>

Answer 2

为了保持一致，我会用jQuery查看p3并使用text（）方法。

$(document).ready(function(){
    var $p3 = $('#p3');
    
    $("#p1").click(function(){
      var message = "Hi";
      
      if ($p3.text() === "Hi") message = "Bye";

      $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>

Answer 3

首先，if (input.value == "Hi")将始终返回false，因为输入值未定义因此始终显示“Hi”