Javascript 点击无法按预期工作

我正在尝试实现如下图所示的内容；当单击看起来像按钮的 Div 时，它会显示有关它们的详细信息。我正在使用内联 Javascript 以及外部 JavaScript 文件。我的问题是，当我单击第一个 div 时，它会显示有关它的详细信息。但是当我点击其他 div 时什么也没有发生。

我的 HTML 代码是:

<html>
<head>
<title>Crash Test</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <script src="javascript/functions.js" type="text/javascript"></script>

    </head>
    <body>
        <fieldset>
            <legend>Mobile Phones</legend>
            <table width="100%">
                <tbody>
                    <tr>
                        <td>
                            <script language="javascript">
                                var secArray = new Array();
                                secArray = ["Asus","HTC","Apple","Samsung","Nokia"];

                                for(var secCnt=1;secCnt<=secArray.length;secCnt++){
                                    document.write('<div class="allSections currentSectionSelected" id="s">');
                                    document.write('<div href="javascript:void(0);" class="tooltip tooltipSelected">');
                                    document.write('<div style="text-overflow:ellipsis;width:92%;overflow:hidden;white-space:nowrap; padding:5px;font-weight: bold;" onclick="javascript:setSecName('+secCnt+',secArray);">');
                                    document.write(secArray[secCnt-1]);
                                    document.write('</div>');
                                    document.write('</div>');
                                    document.write('</div>');
                                }
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <script type="text/javascript">
                                for(var secCnt=1;secCnt<=secArray.length;secCnt++){
                                    if(secCnt == CurrentSection){
                                        document.write('<div id="viewSection'+secCnt+'" style="display:block">You are viewing all about <b>'+secArray[secCnt-1]+'</b> mobile phone: <br><br>');
                                    }
                                    else{
                                        document.write('<div id="viewSection'+secCnt+'" style="display:none;">You are viewing all about <b>'+secArray[secCnt-1]+'</b> mobile phone: <br><br>');
                                    }
                                }
                            </script>

                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </body>
    </html>

我的外部 javascript 文件代码是:

var CurrentSection =1;

function setSecName(sectioncount,sa){
    CurrentSection=sectioncount;

    load_details(sa);
}

function load_details(sa){
    var secArray =sa;
    for(var secCnt=1;secCnt<=secArray.length;secCnt++){
        if(secCnt == CurrentSection){
            document.getElementById('viewSection'+secCnt).style.display = "block";
        }else{
            document.getElementById('viewSection'+secCnt).style.display = "none";
        }
    }
}

<小时/>

我想仅使用Javascript来实现上述功能。请帮助我。提前致谢。

ent

最佳答案

问题是您未关闭详细信息 div 元素。更正后的代码:

for (var secCnt = 1; secCnt <= secArray.length; secCnt++) {
    if (secCnt == CurrentSection) {
        document.write('<div id="viewSection' + secCnt + '" style="display:block">You are viewing all about <b>' + secArray[secCnt - 1] + '</b> mobile phone: <br><br></div>');
    } else {
        document.write('<div id="viewSection' + secCnt + '" style="display:none;">You are viewing all about <b>' + secArray[secCnt - 1] + '</b> mobile phone: <br><br></div>');
    }
}

请注意，我添加了 </div>在上面的代码中。

还有document.write不是呈现和显示信息的最佳方式。您可能应该使用一些静态元素或使用 document.createElement 动态创建元素和appendChild方法。

关于Javascript 点击无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28264739/

Javascript 点击无法按预期工作

上一篇：javascript - AngularJS 嵌套对象数组路径

下一篇：javascript - 服务中的 AngularJS 模态单例不更新 View