检索DIV的id失败

Retrieving id of DIV fails

本文关键字：失败 id DIV 检索      更新时间：2023-09-26

我一直在尝试默认加载一个div (dpara)，然后允许用户根据他们按下的按钮切换div。

页面加载- dpara可见，但dtab和ddl不可见

例如，如果用户选择dtab, dpara被隐藏，dtab变为可见，而ddl保持隐藏。

但这似乎不工作，因为我已经更新了我的代码从这个:

<script type='text/javascript'>
        function arrange(div_id) {
            // First make all the divs hidden...
            divs = document.getElementsByTagName('div');
            for( var i = 0; i < divs.length; i++ ) {
                divs[i].style.display = 'none';
            }
            // Now make the one we want to be visible visible...
            document.getElementById(div_id).style.display = 'block';
        }
    </script>
    <form>
        <input type='button' value='dpara' onclick='arrange(this.value);' />
        <input type='button' value='dtab' onclick='arrange(this.value);' />
        <input type='button' value='ddl' onclick='arrange(this.value);' />
    </form>
    <div id='dpara'>
        123
    </div>
    <div id='dtab'>
        456
    </div>
    <div id='ddl'>
        789
    </div>

除此之外var visibleDiv意味着存储我正在传递的div的id -但是在警报时，它返回[object HTTPInputElement]。我是不是漏掉了什么步骤?下面是一段新代码:

    <script type='text/javascript'>
var visibleDiv;
function arrange(div) {
    // Cache the passed in 'div' as the currently visible one
    visibleDiv = div;
    alert(visibleDiv);
    // First make all the divs hidden...
    var divs = document.getElementsByTagName('div'),
        i,
        len;
    for (i = 0, len = divs.length; i < len; i++) {
        divs[i].style.display = 'none';
    }
    // Now make the one we want to be visible visible...
    visibleDiv.style.display = 'block';
}
    </script>
    <form>
        <input type='button' value='dpara' onclick='arrange(this);' />
        <input type='button' value='dtab' onclick='arrange(this);' />
        <input type='button' value='ddl' onclick='arrange(this);' />
    </form>
    <div id='dpara'>123
    </div>
    <div id='dtab' style='display: none'>456
    </div>
    <div id='ddl' style='display: none'>789
    </div>

在您的第二次尝试中，您不再通过this.value。您只是传入this，这是对input元素的引用(顺便说一下，HTMLInputElement不是HTTPInputElement)。

然而，将其更改回this.value仍然不起作用，因为这一行:

 visibleDiv.style.display = 'block';

我建议将参数更改回this.value并将上面的行更改为:

 document.getElementById(visibleDiv).style.display = 'block';

试试这个更新版本:

var visibleDiv;
function arrange(div) {
    // Cache the passed in 'div' as the currently visible one
    visibleDiv = document.getElementById(div.value);
    // First make all the divs hidden...
    var divs = document.getElementsByTagName('div'),
        i,
        len;
    for (i = 0; i < divs.length; i++) {
        divs[i].style.display = 'none';
    }
    // Now make the one we want to be visible visible...
    visibleDiv.style.display = 'block';
}

JS Fiddle demo.

问题在于您正在将DOM节点传递给函数，而您需要该节点中的value。要解决这个问题，您可以使用:onclick="arrange(this.value);"，或者像我选择的那样，将DOM节点传递到函数中，然后在函数中查找值。

其次，您假设JavaScript会找到正确的div元素而不调用document.getElementById()方法，我已经纠正了这一点，将document.getElementById(div.value)返回的DOM节点分配给变量visibleDiv。我也删除了alert()。但这不是问题，只是为了让它看起来更好一点。

在第二个示例中，onclick处理程序接受'this'，而不是'this.value'。这就是为什么当你警告它的值时你会得到一个HTTPInputElement

在第二个示例中尝试更改

onclick='arrange(this)';


onclick='arrange(this.value)';

'this'在新代码的上下文中，是对已被单击的HTML输入元素的引用，而不是对实际div的引用，我认为这是您想要的。

您的第一个示例适用于我。我用的是铬合金。也许我没有理解这个问题。当我运行第一个示例时，我看到了所有三个div，然后单击任何按钮只显示预期的div。

处理这个问题的一个快速方法是确保样式是在div元素上，并传递"this"而不是"this"。值"给函数。然后你可以使用这个javascript。

function clicked(elm) {
    var tabs = document.getElementsByTagName('div');
    for(var i=0;i<tabs.length;++i) {
        if(tabs[i].style.display == "block") {
            tabs[i].style.display = "none";
        }
    }
    document.getElementById(elm.value).style.display = "block";
}

你的div应该看起来像:

<div id="dpara" style="display:block">
    First Content
</div>
<div id="dtab" style="display:none">
    Second Content
</div>
<div id="ddl" style="display:none">
    Third Content
</div>

和你的按钮:

<input type="button" onclick="clicked(this)" value="dpara" />
<input type="button" onclick="clicked(this)" value="dtab" />
<input type="button" onclick="clicked(this)" value="ddl" />
相关文章：