文章/答案/技术大牛

发布

社区首页 >问答首页 >当数字> 10时，Javascript循环中断。有指针吗？

问当数字> 10时，Javascript循环中断。有指针吗？
EN

Stack Overflow用户

提问于 2011-10-12 14:31:16

回答 3查看 152关注 0票数 0

我使用的代码工作得很好，直到您在下拉列表中选择11，并且它似乎被重置了。

我更新的JSFiddle：http://jsfiddle.net/mcgarriers/rVPnu/2/

有明显的原因吗？

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>


        <title>Javascript Test</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<select id="mySelect" onchange="npup.doSelect(this);">
    <option value="">-- select --</option>

    <!-- the option values are suffixes for the elements to show -->
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>

    <option value="5">6</option>
    <option value="6">7</option>
    <option value="7">8</option>
    <option value="8">9</option>
    <option value="9">10</option>
    <option value="10">11</option>

</select>


<div id="mySpecialElements"><div id="npup0" class="hidden">one div</div><div id="npup1"     class="hidden">second div</div><div id="npup2" class="hidden">third div</div><div id="npup3" class="hidden">fourth div</div><div id="npup4" class="hidden">fifth div</div><div id="npup5" class="hidden">sixth div</div><div id="npup6" class="hidden">seventh div</div><div id="npup7" class="hidden">eighth div</div><div id="npup8" class="hidden">ninth div</div><div id="npup9" class="hidden">tenth div</div><div id="npup10" class="hidden">eleventh div</div><div id="npup11" class="hidden">twelfth div</div></div>

</body>
</html>

而Javascript：

window.npup = (function (containerId, baseId) {
    // save the container of your special element
    var elementsContainer = document.getElementById(containerId);
    var baseId = baseId;
    function doSelect(select) {
        // get value of select
        var value = select.value;
        // find element based on the value of the select
        var targetDiv = findElement(value);
        if (!targetDiv) { return;} // didn't find the element, bail
        // do magic..
        hideAll(elementsContainer);
        showElement(targetDiv);
    }
    // retrieve some element based on the value submitted
    function findElement(value) {
        return document.getElementById(baseId+value);
    }
    // hide all element nodes within some parent element
    function hideAll(parent) {
        var children = parent.childNodes, child;
        // loop all the parent's children
        for (var idx=0, len = children.length; idx<len; ++idx) {
            child = children.item(idx);
            // if element node (not comment- or textnode)
            if (child.nodeType===1) {
                // hide it
                child.style.display = 'none';
            }
        }
    }

    // display a certain element
    function showElement(element) {

    element.style.display = '';
     //alert(element.id )
    var tee = element.id
    // var gh = tee.charAt(tee.length-1);  // get the int form id will (fail if GT 9)
    var gh = tee.slice(-1);

    // if id GT 0 
    if(gh  > 0){
       var elms = document.getElementById('mySpecialElements');

      // get all child nodes within mySpecialElements       
      for (var i = 0; i < gh ; i++) {
      // if DIV display elements by id as block
        if(elms.nodeName == "DIV"){ 
      document.getElementById(elms.childNodes[i].id).style.display = "block";
        }
       }
    }

    } 
    // hide all on page load (might want some extra logic here)
    hideAll(elementsContainer);

    // export api to use from select element's onchange or so
    return {
        doSelect: doSelect
    };
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements

再来一次。超级抱歉刚刚添加了链接。为未来做好准备。

非常感谢你来看这个

javascript

loops

for-loop

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-10-12 14:37:24

看看这一行：

var gh = tee.slice(-1);

它将选择id字符串的最后一个字符，因此对于第11个元素，它将是0而不是10。

使用substr代替：

var gh = tee.substr(4);

票数 4

Stack Overflow用户

发布于 2011-10-12 14:38:44

问题是这条线

var gh = tee.slice(-1);

您只接受字符串的最后一个字符。如果是"npup10“，它只是0。如果您的前缀总是"npup“，那么您可以这样做来解决问题：

var gh = tee.substring(4);

票数 3

Stack Overflow用户

发布于 2011-10-12 14:42:17

变到

var gh = parseInt(tee.replace(/[^\d]/g,""),10)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7741727

复制

相似问题

问当数字> 10时，Javascript循环中断。有指针吗？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当数字> 10时，Javascript循环中断。有指针吗？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当数字> 10时，Javascript循环中断。有指针吗？
EN