1

JavaScript と HTML は初めてです。簡単な質問をするかもしれませんが、解決策を見つけるのに混乱していることも事実です。

アラートボックスがあります。でonload()、リストとして表示する行数を要求します。一度

番号が入力されると、アラートボックスのユーザーの要求に従って行が入力されます。

私の質問は、ここで id を設定して、ここでinnerHTMLどの項目が選択されているかを確認できるようにする方法です。

これに関連するチュートリアルがあれば、それも役に立ちます。

これが私のコードです：

<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>

解決策を見つけるのを手伝ってください。

ありがとう

4

2 に答える 2

1

私はあなたが次のようなものが欲しいと思います：

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

各段落が一意のIDを持つようにします。スクリプト文字列には一重引用符を使用し、HTML属性値には二重引用符を使用することを好みます。

于 2012-11-12T06:41:49.653 に答える
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");
    }
}
于 2012-11-12T06:27:12.677 に答える