Question

好的，所以这是我的Javascript代码，我无法解决为什么这不起作用。基本上，我会有多个下拉菜单，分别是＆＃39; dropdown＆＃39;并且我想在单击图像时更改特定的下拉列表（显示除法的内容）。我已经确认Javascript 正确链接到JS和CSS文件。我还确认onClick方法适用于控制下拉菜单的图像按钮。单击图像时，它会将参数发送到调节下拉列表的函数。这是JS：


    var current;
    var get = function(name) {
        current = document.getElementsByClassName(name);
    }
    var show = function(menu) {
        get('image');
        if(current[menu].src === 'plus.png') {
            current[menu].src = 'minus.png';
            get('dropdown');
            current[menu].style.display = 'block';
        } else {
            current[menu].src = 'plus.png';
            get('dropdown');
            current[menu].style.display = 'none';
        }
    }

修改以下是完整的HTML：

<!DOCTYPE html>
    <head>
        <title>Gwiddle - Site Creator</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css' />
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div id='banner'><p>Gwiddle Site Creator</p></div>
        <div class='center'>
            <p>Tools<img src='plus.png' class='image' onClick='show(0)' /></p>
            <p>Options<img class='image' src='plus.png' onClick='show(1)' /></p>
            <p>Code<img class='image' src='plus.png' onClick='show(2)' /></p>
        </div>
        <div class='dropdown'>
            <p>Test</p>
        </div>
    </body>
</html>

CSS ：

* {
    font-family:Verdana;
}
body {
    padding:0;
    margin:0;
}
img {
    display:inline;
    margin-left:.3em;
    width:.8em;
    height:.8em;
}
.center {
    width:100%;
    text-align:center;
}
.center > p {
    font-size:1.4em;
}
.dropdown {
    display:none;
    width:100%;
    margin:1em 0 1em 0;
}
#banner {
    font-size:2em;
    color:white;
    width:100%;
    background-color:#3399FF;
    margin-bottom:1em;
    text-align:center;
    box-shadow:0 2px 5px 2px #CCCCCC;
    padding:.5em 0 .5em 0;
}
#banner p {
    margin:0;
}
#tools {
    color:red;
}

Answer 1

此脚本在Chrome 37 中使用页面中的脚本可以正常使用。您的浏览器可能不支持它 GetElementsByClassName Support。

您可以尝试使用jquery： $('.image')[menu] ...

既然您声明它不应该是您的浏览器，您确定该页面可以找到该javascript文件吗？如果添加到脚本中，是否会调用alert('test');吗？

Javascript GetElementsByClassName不起作用

1 个答案: