当 number > 时，Javascript For 循环中断10. 有什么建议吗？

发布于 2024-12-09 14:15:17 字数 4315 浏览 0 评论 0原文

我使用的以下代码运行良好，直到您在下拉列表中选择 11 并且它似乎已重置。

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

有吗这是一个明显的原因吗？

HTML

<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

再次。非常抱歉刚刚添加了链接。为将来适当注意。

非常感谢您查看此内容

原文

I'm using the following code which works perfectly, until you select 11 in the dropdown and it seems to reset.

My updated JSFiddle: http://jsfiddle.net/mcgarriers/rVPnu/2/

Is there an obvious reason for this?

HTML

<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>

And the 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

Again. Super apologies for just adding the link. Duly noted for the future.

Many thanks for taking a look at this

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谷夏 2024-12-16 14:15:17

看这一行：

var gh = tee.slice(-1);

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

使用 substr 代替：

var gh = tee.substr(4);

Look at this line:

var gh = tee.slice(-1);

It will pick out the last character of the id string, so for the 11th element it will be 0 instead of 10.

Use substr instead:

var gh = tee.substr(4);

回复收藏 0 原文

醉态萌生 2024-12-16 14:15:17

问题是这一行

var gh = tee.slice(-1);

您只获取字符串的最后一个字符。如果是“npup10”，它只是 0。如果您的前缀始终是“npup”，那么您可以这样做来解决问题：

var gh = tee.substring(4);

The problem is this line

var gh = tee.slice(-1);

You only take the last character of the string. In case of "npup10" it's just 0. If your prefix is always "npup" then you can do this to solve the problem: