Question

为什么这有效？

index++;
for (var z=index ; z < 11; z++) {
    $( "#div"+z ).hide();
}

这不是吗？

for (var z=index+1 ; z < 11; z++) {
    $( "#div"+z ).hide();
}

我真的不明白为什么......我还会向您提供我正在处理的网页的完整代码。我尝试做的是让下拉选择器选择页面上显示的文本框数量。如果我以错误的方式做这件事，请告诉我。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Settings</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>

<body>
<p align="center">IP address
  <label for="textfield3">:</label>
  <input type="text" name="textfield3" id="textfield3" />
  <label for="textfield4">Port:</label>
  <input type="text" name="textfield4" id="textfield4" />
</p>
<p align="center">
  <label for="select">Number of variables:</label>
  <select name="select" id="select">
    <option value="-" selected="selected">-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</p>
<div class="hidden" id="div1">
  <p align="center">
    <label for="textfield">Variable1:</label>
    <input type="text" name="textfield" id="textfield" />
    <label for="textfield2">    Display name:</label>
    <input type="text" name="textfield2" id="textfield2" />
  </p>
</div>
<div class="hidden" id="div2">
  <p align="center">
    <label for="textfield21">Variable2:</label>
    <input type="text" name="textfield3" id="textfield21" />
    <label for="textfield22">Display name:</label>
    <input type="text" name="textfield3" id="textfield22" />
  </p>
</div>
<div class="hidden" id="div3">
  <p align="center">
    <label for="textfield23">Variable3:</label>
    <input type="text" name="textfield4" id="textfield23" />
    <label for="textfield24">Display name:</label>
    <input type="text" name="textfield4" id="textfield24" />
  </p>
</div>
<div class="hidden" id="div4">
  <p align="center">
    <label for="textfield25">Variable4:</label>
    <input type="text" name="textfield4" id="textfield25" />
    <label for="textfield26">Display name:</label>
    <input type="text" name="textfield4" id="textfield26" />
  </p>
</div>
<div class="hidden" id="div5">
  <p align="center">
    <label for="textfield27">Variable5:</label>
    <input type="text" name="textfield5" id="textfield27" />
    <label for="textfield28">Display name:</label>
    <input type="text" name="textfield5" id="textfield28" />
  </p>
</div>
<div class="hidden" id="div6">
  <p align="center">
    <label for="textfield29">Variable6:</label>
    <input type="text" name="textfield5" id="textfield29" />
    <label for="textfield30">Display name:</label>
    <input type="text" name="textfield5" id="textfield30" />
  </p>
</div>
<div class="hidden" id="div7">
  <p align="center">
    <label for="textfield31">Variable7:</label>
    <input type="text" name="textfield6" id="textfield31" />
    <label for="textfield32">Display name:</label>
    <input type="text" name="textfield6" id="textfield32" />
  </p>
</div>
<div class="hidden" id="div8">
  <p align="center">
    <label for="textfield33">Variable8:</label>
    <input type="text" name="textfield6" id="textfield33" />
    <label for="textfield34">Display name:</label>
    <input type="text" name="textfield6" id="textfield34" />
  </p>
</div>
<div class="hidden" id="div9">
  <p align="center">
    <label for="textfield35">Variable9:</label>
    <input type="text" name="textfield7" id="textfield35" />
    <label for="textfield36">Display name:</label>
    <input type="text" name="textfield7" id="textfield36" />
  </p>
</div>
<div class="hidden" id="div10">
  <p align="center">
    <label for="textfield37">Variable10:</label>
    <input type="text" name="textfield7" id="textfield37" />
    <label for="textfield38">Display name:</label>
    <input type="text" name="textfield7" id="textfield38" />
  </p>
</div>
<script>
$("select").change(function () {
    var index=0;
    index=$( "select" ).val();
    for (var i=index; i > 0; i--) {
        $( "#div"+i ).show();
    }
    index++;
    for (var z=index ; z < 11; z++) {
        $( "#div"+z ).hide();
    }
  })
</script>

</body>
</html>

Answer 1

您获得不同行为的原因是因为您从

获得的价值

index=$( "select" ).val();

是一个字符串。增量（++）和减量（ - ）运算符将其转换为数字，以便循环工作。但是当你写作

index+1

你将1连接到索引字符串（例如，“5”+1），你得到字符串“51”。

尝试在像Firebug这样的调试器中逐步执行代码，然后您就会看到正在发生的事情。

循环声明语句内部的算术运算

1 个答案: