0

アプリケーションでデータベースのコンテンツのリストを表示します。データベースからレコードを取得し、フロント エンドで for-each ループを反復処理すると、コンテンツが表示されます。アイテムをクリックしようとすると、リストの最初のアイテムのみが表示されます。以下は私のコードです。どうすればこの問題を克服できますか?

function userselection()
        {
            var selecteduser1=document.getElementById("lbl_user").innerHTML;
            document.writeln(selecteduser1);
        }

<div style="border: 2px solid activeborder;width:300px;height: 400px;border-radius: 5px;">
                    <ul id="userlist" style="text-align: left;">
                        <c:forEach items="${list_onlineusers}" var="userslist">
                            <li  id="li_user" style="list-style-image: url(images/online.png);cursor: pointer;height: 25px;margin-left: 0;margin-right: 10%;margin-top: 0.5em;margin-bottom: 7%;" value="${userslist}">
                                <label onmousedown="userselection()" id="lbl_user" style="font-family:Trebuchet MS,Times,serif;color: black;font-size: 16px;cursor: pointer;">
                                    ${userslist}
                                </label>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
4

4 に答える 4

1

IDの定義と使い方

id 属性は、HTML 要素の一意の ID を指定します (値は HTML ドキュメント内で一意である必要があります)。id 属性は、スタイル シート内のスタイルを指すために最もよく使用され、JavaScript によって (HTML DOM を介して) 操作します。特定の ID を持つ要素。

リスト内のすべてのアイテムに同じ ID を使用しています。<c:forEach>ID にループ カウントを追加するには、ループを少し変更する必要があります。そのため、各アイテムには一意の ID が割り当てられます。以下のようにコードを変更してください

<c:forEach items="${list_onlineusers}" var="userslist" varStatus="count">
   <li  id="li_user${count.index}" value="${userslist}">
        <label onmousedown="userselection()" id="lbl_user${count.index}">
          ${userslist}
         </label>
   </li>
</c:forEach>

上記の変更により、各アイテムに一意の ID が設定されます。これで、イベント リスナーの登録時にクリックされたアイテムの一意の ID をドキュメントに渡して、必要なことを実行できるようになりました。まず、ドキュメント内のすべての要素に一意の ID があることを確認する必要があります。

注 : 読みやすさを向上させるために、HTML からインライン CSS スタイル プロパティを削除しました。

于 2014-03-25T07:07:46.450 に答える
0

すべての選択に ID 'lbl_user' を使用しています。すべてのアイテムが同じ ID を共有しているため、

var selecteduser1=document.getElementById("lbl_user").innerHTML;

が呼び出されると、最初に使用可能な ID のみが取得されます。代わりに、各アイテムに一意の ID を割り当てるようにしてください。

または、関数内で次のようにします。

function userselection(){
     var selecteduser1=this.innerHTML;
     document.writeln(selecteduser1);
}
于 2014-03-25T07:05:24.927 に答える
0

ループが一意ではないビューに id="li_user" & id="lbl_user" の複数の ID を作成するため、ループは間違っています。最初にそれを修正しました。

于 2014-03-25T07:05:50.040 に答える