Question

使用以下标记，我需要根据用户输入表单输入的方式显示Div的数量，因此如果用户输入5，则div 1,2,3,4＆amp; 5是可见的，但其他是隐藏的，如果他们进入3然后只有1,2＆amp; 3是可见的......

表格输入：

<input id="sitesinput" maxlength="3" />

Div标记：

<div id="inputsite" onChange='site_change()'>
<div id="site1" class="tenth">Site 1<br /><input name="site1" type="text" size="3" value="0" /></div>
<div id="site2" class="tenth">Site 2<br /><input name="site2" type="text" size="3" value="0" /></div>
<div id="site3" class="tenth">Site 3<br /><input name="site3" type="text" size="3" value="0" /></div>
<div id="site4" class="tenth">Site 4<br /><input name="site4" type="text" size="3" value="0" /></div>
<div id="site5" class="tenth">Site 5<br /><input name="site5" type="text" size="3" value="0" /></div>
<div id="site6" class="tenth">Site 6<br /><input name="site6" type="text" size="3" value="0" /></div>
<div id="site7" class="tenth">Site 7<br /><input name="site7" type="text" size="3" value="0" /></div>
<div id="site8" class="tenth">Site 8<br /><input name="site8" type="text" size="3" value="0" /></div>
<div id="site9" class="tenth">Site 9<br /><input name="site9" type="text" size="3" value="0" /></div>
<div id="site10" class="tenth">Site 10<br /><input name="site10" type="text" size="3" value="0" /></div>
</div>

请注意，site_change功能与我在此处所需的功能无关。

感谢您的光临。

乙

Answer 1

(function() {

    var divs = document.getElementById('inputsite').childNodes,
        visible = parseInt(document.getElementById('sitesinput').value, 10);

    if (isNaN(visible)) {
        return;
    }

    for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
        divs[i].style.display = (i < visible) ? 'block' : 'none'; 
    }

})();

这会循环遍历#inputsite的所有子项，并将display属性设置为block或none，具体取决于输入#sitesinput的数字。

此外，div没有onChange属性，甚至可以触发onchange。

Answer 2

$("#sitesinput").live("change", function () {

   var num = parseInt($("#sitesinput").val());
   for (i = 1; i <= num ; i++)
   { 
      $("#site" + i).hide();

   }


});

Answer 3

走这条路： -

function countAndRun(){
var req = parseInt(document.getElementById("sitesinput").value);
for(i=1;i<=req;i++){document.getElementById("site"+i).style.display="";}
for(i=req+1;i<=10;i++){document.getElementById("site"+i).style.display="none";}
}
window.setInterval("countAndRun()", 1000); // 1 second interval to prevent overload

希望这有帮助

根据用户输入取消隐藏一些Div

3 个答案: