Question

我正在尝试实现如下图所示的内容;当点击看起来像按钮的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

Answer 1

问题是你留下了未公开的详细信息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点击无法按预期工作

1 个答案: