Question

我是JavaScript和HTML的新手。我可能会问一个简单的问题，但这也是正确的，我很难找到解决方案。

我有警报框。在onload()，它要求显示为列表的行数。一旦

输入数字，然后根据alertbox中用户的需求填充行。

我的问题是：如何在innerHTML内设置ID，以便我可以查看此处选择的项目。

如果给出与此相关的任何教程，它也会很有用。

这是我的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="scrollbar.css">

<script type="application/javascript" src="iscroll.js?v4"></script>
<script type="text/javascript">

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

</script>
        <!--    html,body {
                height: 50%
            }

            #left {
                float: left;
                width: 25%;
                height: 90%
            }
            #lst {
                width: 75%;
                height: 90%
            } -->
<style type="text/css" media="all">
body,ul,li {
    padding:0;
    margin:0;
    border:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
}

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}

#scroller {
    position:relative;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    float:left;
    width:100%;
    padding:0;
}

#scroller ul {
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}

#scroller li > a {
    display:block;
}

        </style>
<script type = "text/javascript">

function listClicked(id)
    {
        var listid = id;
        //alert("click called  "+ listid);
        if(listid == 'l1')
        {
            //alert("inside l1");
             window.document.location.href = 'l1.html';         
        }
        else if(listid == 'l2')
        {
            window.document.location.href = 'l2.html';  
        }
        else if(listid =='l3')
        {
            alert("Current date is:  "+new Date());
        }
        else if(listid == 'l4')
        {
            window.document.location.href = 'login.html';           
        }
        else if(listid == 'l5')
        {
            window.document.location.href = 'customList.html'
        }

    }

    function callAlert()
    {
        listRows = prompt("how many list row you want??");
        var ids = 0;
        var listText = "List Number";
                for(var i = 0;i < listRows; i++)
                {
                    if(i%2==0)
                    {
                    ids++;
                        listText = listText + "<p style ='background-color:#EEEEEE'>";
                    }

                    else
                    {
                    ids++;
                        listText = listText + "<p>";
                    }                                   
                    listText = listText + i;

                    document.getElementById("lst").innerHTML = listText+i;                  
                }
                //document.getElementById("lst").innerHTML = listText+i;
    }
            /*  if you name your html files lise so:

            htmlfile1.html
            htmlfile2.html
            htmlfile3.html

            then you can create a script that creates the filepath according to the value of the variable.


            <script type=text/javascript>
            var yourvar='???';
            window.location="htmlfile"+yourvar+".html"; */
            //-->
</script>
<body onload = callAlert();loaded()>
<ul style="list-style: none; margin-top:100px;">
<li id = "l1" onclick = listClicked(id);>list item 1</li>
<li id = "l2" onclick = listClicked(id);>list item 2</li>
<li id = "l3" onclick = listClicked(id);>Show current date alert</li>
<li id = "l4" onclick = listClicked(id);>Login</li>
<li id = "l5" onclick = listClicked(id);>list item 5</li>

    <div id="wrapper">
    <div id="scroller">
    <ul id="thelist">
    <div id = "lst" ></div>         
        </ul>
    </div>
    </div>
</ul>

</body>
</head>
</html>

请帮我找出解决方案。

由于

Answer 1

要设置ID，只需使用DOM元素的ID属性：

MyElement.id = "whatever";

但看起来你想要获取ID，就像在这一行：

onclick = listClicked(id);

在这种情况下，您只需传递this，它将传递该元素的引用，并使用该属性的ID属性。

onclick = listClicked(this);

使用Javascript：

function listClicked (someElement) {
    alert(someElement.id);
}

代码中的listClicked函数也可以使用一些改进，例如：

function listClicked(element) {
    var listid = element.id;

    switch (listid) {
        case 'l1':
            alert("Foo");
            break;
        case 'l2':
            alert("Bar");
            break;
        default:
            alert("Default");
    }
}

Answer 2

我想你想要这样的东西：

listText = listText + '<p style="background-color:#EEEEEE" id="foo' + i + '">';

以便每个段落都有唯一的ID。我更喜欢对脚本字符串使用单引号，对HTML属性值使用双引号。

如何在innerHTML中的运行时设置id？

2 个答案: