div のブロック表示と jquery の　style　について

body 以下のdiv の中身を block単位で切り替えて表示しようとしているが
まずはlogin画面を表示し
続いて、ログイン成功時に、次のユーザーリスト画面を表示しようとしている
が、

（１）
ユーザーリスト画面を表示するように切り替えると、
jquery の style が無効になってしまっている

（２）
試しに、#login-page と #friend-list の display を
最初から firend-list を blockにし、login-page をnone にしても
friend-list の表示はjqueryの styleが無効になっている

ただし、

（３）

（２）の状態で、
body 以下の

<div> によるブロックを

friend-list を上にして login-screen を下にすると

そのほかは何も変えていないのに、 friend-list の画面は
jquery のstyle が有効になっている

（４）

（３）のように、上下を入れ替えた状態で

<style type="text/css">
	#login-page{
		display:block;
	}
	#friend-list{
		display:none;
	}
</style>

のように初期画面を login-page にすると
今度は login-page のほうの画面が jqueryのstyle が無効になって表示されてしまう

初歩的なことかもしれませんが
原因がわからず、困っています。

アドバイスお願いします。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <title>テスト</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />


<script src="jquery.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<style type="text/css">
	#login-page{
		display:block;
	}
	#friend-list{
		display:none;
	}
</style>

<script type="text/javascript">
<!--
function login() {
	var id = document.login_screen.user_no.value;
	var pass = document.login_screen.user_pass.value;
	var res;

	alert('id=' + id + ':pass=' + pass);

	//ログイン処理
	//ここで行う（今はなし）



	//結果処理(テストのため、id,passの値で成功非成功を仮に判断している)
	if (id=='1' && pass=='1') {
		res = "ok";
	} else if (id=='1' && pass=='2') {
	} else {
		res = "ng";
	}
	//

	if (res=="ok") {
		//フレンドリストを表示するための処理を加える
		alert('ログイン成功');
		document.getElementById("friend-list").style.display="block";
		document.getElementById("login-page").style.display="none";
	} else {
		alert('ログイン失敗');
		errmsg ="<center><font color=\"#ff0000\">"
		errmsg += "正しいユーザNo、パスワードを入力してください";
		errmsg += "</font></center>"
		document.getElementById("login_errmsg").innerHTML = errmsg;
	}

	//  document.login_screen.T3.value = id + pass;
}
// -->
</script>

</head> <body>  <div data-role="page" id="login-page"> <div data-role="header"> <h1>ログイン画面</h1> </div> <div class="ui-errmsg"> <span id="login_errmsg"></span> </div>

	<form name="login_screen" action="#">
		<div role="main" class="ui-content">
			<div class="ui-field-contain">
				<label for="user-no">ユーザNo</label>
				<input type="text" name="user_no" id="user_no" maxlength="10" value="" placeholder="ユーザーNo"/>
			</div>
			<div class="ui-field-contain">
				<label for="user-pass">パスワード</label>
				<input type="text" name="user_pass" id="user_pass" maxlength="10" value="" placeholder="パスワード"/>
			</div>
			<div class="ui-field-contain">
				<input type="button" id="login-btn" class="ui-btn ui-shadow ui-corner-all ui-mini" onClick="login()" value="ログイン">
			</div>
		</div>
	</form>
</div>


<!-- ユーザー一覧 -->
<div data-role="page" id="friend-list">
	<div data-role="header">
		<h1>ユーザー一覧</h1>
	</div>
	<div class="ui-errmsg">
		<span id="login_errmsg">ユーザーを選択してください</span>
	</div>

		<div role="main" class="ui-content">
			<table>

			<form name="friend_select" action="#">
				<tr>
				<td>
					<img src="xxx" onclick="user_select(1)">
				</td>
				<td>
					ユーザー名1（ニックネーム)
				</td>
				</tr>
			</form>

			<form name="friend_select" action="#">
				<tr>
				<td>
					<img src="xxx" onclick="user_select(2)">
				</td>
				<td>
					ユーザー名2（ニックネーム)
				</td>
				</tr>
			</form>
			<form name="friend_select" action="#">
				<tr>
				<td>
					<img src="xxx" onclick="user_select(3)">
				</td>
				<td>
					ユーザー名3（ニックネーム)
				</td>
				</tr>
			</form>

			</table>

		</div>
</div>

</body> </html>

行動規範の内容に同意します

回答1件

（１）
ユーザーリスト画面を表示するように切り替えると、
jquery の style が無効になってしまっている

DOM構築後に行ってみては？

lang
1//DOMContentLoadedタイミングで下記の処理実行
2$(document).ready(function(){
3    var login_id     = $('input[name="user_no"]:first').val(),
4          password  = $('input[name="user_pass"]:first').val(),
5          response   = 'ng';
6    if ( id == '1' && password == '1' )
7    {
8       response = 'ok';
9    }
10    else if ( id == '1' && password == '2' )
11    {
12        //TODO:ここでなにかする？
13    }
14
15    if ( response == 'ok' )
16    {
17        //これで表示
18        $('#friend-list').show();
19        //これで隠す
20        $('#login-page').hide();
21    }
22    else
23    {
24        $('<span>').css({
25           'color' : '#f00'
26        }).text('正しいユーザNo、パスワードを入力してください').appendTo('#login_errmsg');
27    }
28});

大変申し上げにくいのですが、あなたのコードはjQueryを使用しておりません。
以下、問題点です。

javascript内での認証はソースコードを見て簡単に認証できてしまうので危険です。Ajaxでサーバーサイドにリクエストしてみたりしてセキュアにしてみてはいかがでしょうか？
fontタグはW3C的に非推奨です。使用するのはやめましょう。
centerタグはW3C的に非推奨です。使用するのはやめましょう。むしろdoctype的にはhtml5ですので廃止です。

投稿2015/06/17 01:41

編集2015/06/17 04:51

nanndemoiikara

総合スコア775

it_solution_lab

2015/06/17 04:15

回答ありがとうございます id=1 とか　pass=2 とかいうのは現在、動作確認のテストのために、具体的な数字を入れているだけで実際に1のときどうする、といった認証は行いません。 font も center も実際には使いません。 id="header" になっている部分や labelの表示 input type="button" で表記している部分が、上下を入れ替えただけで、上の div にある表示と、下のdiv にある表示がうまく行かない原因を知りたいと思っています。ですので、ログイン認証そのものの処理や　font 　center などのタグは、あくまでも仮です。よろしくお願いします。

nanndemoiikara

2015/06/17 04:53

失礼しました。質問の意図を理解致しました。下記の用にdiv[data-role="page"]内に二つとも入れて頂ければできるかと思います。 div[data-role="page"]:firstにのみスタイルが適用されます。 <div data-role="page"> <dvi id="friend-list"></div> <dvi id="login-page"></div> </div>

it_solution_lab

2015/06/18 01:07

出来ましたありがとうございます

nanndemoiikara

2015/06/18 01:15

解決したようで何よりです。

行動規範の内容に同意します