Question

我正在尝试使用它，因此当用户输入一个小于1且大于20的数字时，他们将得到一个错误代码，并以黄色突出显示。当用户单击“问候”按钮时，之前的文本应消失。

现在使用突出显示的代码可以正常工作，但是却弄乱了我消失的文字。例如，当我说2，然后说22时，来自2的文本不会消失。当我执行22，然后是2时，文本消失。我不确定我的布局是否错误，还是需要使用其他方式。迷失了引起我问题的原因。

function greetMe() {
  $('#errors').css("background-color", "white");
  var name = document.getElementById('txtName').value;
  var nr = document.getElementById('txtNmr').value;

  if (nr > 0 && nr < 21) {
    $('#errors').text('');
    $('#greetings').text('');
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $('#greetings').append("Hello, " + name + "<br />");
    }
  } else {
    $('#errors').append("Please Enter A Number Between 1 and 20");
    $('#errors').css("background-color", "yellow");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <p>Type in your name</p>
  <input type="text" id="txtName">
  <p>Enter a number 1-20.</p>
  <input type="text" id="txtNmr">
  <input type="button" value="Greet Me!" onclick="greetMe()">
  <hr>
  <div id="greetings">
    <!-- Section to output the greeting -->
  </div>
  <div id="errors">
    <!-- Section to output the greeting -->
  </div>

Answer 1

您需要在#errors / #greetings语句之前将if和else的文本设置为空字符串。否则，只有在输入有效的情况下才会删除文本，否则就不会删除文本，因为您只在if语句而不是else部分中设置了那些元素的文本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
 <body>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>
<script type="text/javascript">
function greetMe(){
  $('#errors').css("background-color", "white");
  var name = document.getElementById('txtName').value;
  var nr   = document.getElementById('txtNmr').value;
$('#errors').text('');
$('#greetings').text('');
 if (nr > 0 && nr < 21){
for (var counter = 0; counter < nr; counter = counter + 1) {      
    $('#greetings').append("Hello, " + name + "<br />");
  }
  }
  else{
    $('#errors').append("Please Enter A Number Between 1 and 20");
    $('#errors').css("background-color", "yellow");
  }
}
</script>
</body>

JSFiddle：http://jsfiddle.net/tsgh3o6u/

Answer 2

只需编写以下代码：

        The state information is invalid for this page and might be corrupted.
        Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

        Exception Details: System.Web.HttpException: The state information is invalid for this page and might be corrupted.

        Source Error: 

        The source code that generated this unhandled exception can only be shown when compiled in debug mode. To enable this, please follow one of the below steps, then request the URL:

        1. Add a "Debug=true" directive at the top of the file that generated the error. Example:

          <%@ Page Language="C#" Debug="true" %>

        or:

        2) Add the following section to the configuration file of your application:

        <configuration>
           <system.web>
               <compilation debug="true"/>
           </system.web>
        </configuration>

        Note that this second technique will cause all files within a given application to be compiled in debug mode. The first technique will cause only that particular file to be compiled in debug mode.

        Important: Running applications in debug mode does incur a memory/performance overhead. You should make sure that an application has debugging disabled before deploying into production scenario.

在if / else语句之外，它可以解决您的问题。

还有另一种使用以下代码清空div元素的方法：

 $('#errors').text('');
 $('#greetings').text('');

它也解决了您的问题，我附上了它的工作示例：

  $('#errors').html('');
  $('#greetings').html('');

function greetMe(){
  $('#errors').css("background-color", "white");
  var name = document.getElementById('txtName').value;
  var nr   = document.getElementById('txtNmr').value;

  $('#errors').html('');
  $('#greetings').html('');

 if (nr > 0 && nr < 21) {
		for (var counter = 0; counter < nr; counter = counter + 1) {          $('#greetings').append("Hello, " + name + "<br />");
    }
  }
  else{
     $('#errors').append("Please Enter A Number Between 1 and 20");
     $('#errors').css("background-color", "yellow");
  }
}

希望，它可以解决您的问题。

Answer 3

您可以使用jquery的.empty()函数清除div的内容，并且在检查条件之前必须清除div的内容。

function greetMe() {
  $("#errors").css("background-color", "white");
  var name = document.getElementById("txtName").value;
  var nr = document.getElementById("txtNmr").value;
  $("#errors").empty();
  $("#greetings").empty();
  if (nr > 0 && nr < 21) {
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $("#greetings").append("Hello, " + name + "<br />");
    }
  } else {
    $("#errors").append("Please Enter A Number Between 1 and 20");
    $("#errors").css("background-color", "yellow");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

jQuery高亮显示文本无法使用.css（“ background-color”）

3 个答案: