如何在Jquery中为if语句选择一个ID

How to select an ID in Jquery for an if statement

本文关键字：ID 一个 选择 语句 Jquery 中为 if      更新时间：2023-09-26

我想使用如下所示的表单选择器，并根据所选择的选项，输出不同。很简单，但我没有让它工作。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){ 
    if ("#1") {
        $("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">1</td><td width="64">80</td><td width="93">32</td></tr></tbody></table>");
    } 
    if ("#2") {
        $("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">2</td><td width="64">88</td><td width="93">36</td></tr></tbody></table>");
    }
});
</script>
</head>
<body>
<div>
   <form id="option">
  <label for="level">Level at a glance:</label>
  <select name="level" id="level">
    <option id="1">1</option>
    <option id="2">2</option>
  </select>
</form>
<div id="display">
</div>
</div>
</body>
</html>

这里有几个问题。

  • 首先，"#1"answers"#2"总是会== true，因为它们是字符串。
    • 第二，修改文本的代码只在页面加载时发生一次。没有任何东西告诉它更新后，菜单更改。
  • 第三，在以$("#display").html....开头的行中，您应该有一个非常长的字符串，但您每次都使用双引号将其分开。您需要在单引号和双引号之间切换。如果我说，"class="potato">"，它把"class="看作一个字符串，把">"看作另一个字符串，但是它不知道怎么处理potato。您需要使用单引号，如"class='potato'>"或'class="potato">'。

这是固定代码:

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function changeText(){
    if ($("#level option:selected").text() == "1") {
        $("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>1</td><td width='64'>80</td><td width='93'>32</td></tr></tbody></table>");
    } 
    if ($("#level option:selected").text() == "2") {
        $("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>2</td><td width='64'>88</td><td width='93'>36</td></tr></tbody></table>");
    }
}
$(document).ready(function(){ 
    changeText();
});
</script>
</head>
<body>
<div>
   <form id="option">
  <label for="level">Level at a glance:</label>
  <select name="level" id="level" onchange="changeText()">
    <option id="1" >1</option>
    <option id="2">2</option>
  </select>
</form>
<div id="display">
</div>
</div>
</body>

当文档准备好时，执行一次javascript条件。你必须添加一个事件，当选择值改变!

在你的option元素(<option value="1">1</option>)中添加一些值

$(document).ready(function(){
  // Set event
  $("#level").change(function(){
    if ($(this).val() === "1") {
      $("#display").html(...);
    } else {
      $("#display").html(...);
    }
  }
  // Call event when document loaded
  $("#level").change();
});
相关文章：