みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jQueryが反映されません><

jQueryとJavaScriptでToDoメモを作っています
下記のコードなのですが
削除ボタンが表示されないのとToDoリストがおかしな位置に来ます
どうすればいいのでしょうか?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="css/style.css">

<script>

monaca.viewport({width: 340});
    document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {
document.addEventListener("backbutton", onBkbtn, false);
}

function onBkbtn() {
location.href = "index.html";
}
</script>



</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>CheckList</h1>
</div>


</center>
<!--新規追加ボックス-->
<center>
<div id="new_div">
<input id="new_txt" type="text" value="" placeholder="ToDoを書き込んでください" style="width:270px" size="40"/>

</center>
<br>
<div data-role="button" data-icon="plus" id="add_btn">追加</div>


</div>
<!--項目一覧-->

<div id="items_div"></div>

<div id="control_div">
<div data-role="button" data-icon="delete" id="done_btn">削除</div>
</div>

</div>
<!--Android1.6対策-->
<script src="gear5-0.3.js"></script>

<script>
//便利な関数の定義
function $(id) { return document.getElementById(id); }
//変数の初期化
var todo_div = $("todo_div");
var db;
var cbItems = [] ;
//ドキュメント読み込み時のイベントを設定
window.onload = function() {
if (window.openDatabase == undefined) {
alert("WEB Databaseに対応していません!!") ;
return

}
//データベースを開く
db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024);
db.transaction(function(tr) {
//テーブルがなければ作る
var query =
"CREATE TABLE IF NOT EXISTS todo_tbl(" +
" todo_id INTEGER PRIMARY KEY, " +
" memo TEXT NOT NULL " +
")";
tr.executeSql(query, [], loadItems);
});
};
// アイテムの読み込み実行

function loadItems() {
db.transaction(function(tr) {
var query = "SELECT * FROM todo_tbl" ;
  tr.executeSql(query, [] ,loadItems_onResult);
});
}

function loadItems_onResult(tr, rs) {
//すべての子ノードを削除
while(items_div.hasChildNodes()){
items_div.removeChild(items_div.lastChild);

}
cbItems = [];
//チェックボックスの作成
for (var i = 0; i < rs.rows.length; i++) {
var row = rs.rows.item(i);
var todo_id = row.todo_id;
var memo = row.memo;
//チェックボックスの追加
var cb = document.createElement("input");
cb.className = "large"; //CSSに対応させる
cb.type = "checkbox";
cb.value = todo_id;
cbItems.push(cb);

var label = document.createElement("span");
label.innerHTML = memo;
var line = document.createElement("div");
line.appendChild(cb); //チェックを追加
line.appendChild(label); //ラベルを追加
items_div.appendChild(line); //項目にlineを追加

}
}

//追加ボタンを押したときのイベント
$("add_btn").onclick = function() {
var text = $("new_txt").value;
$("new_txt").value = "";
db.transaction(function(tr) {
var query = "INSERT INTO todo_tbl(memo)VALUES(?)";
tr.executeSql(query,[text],loadItems);
});
};
//削除を押した時のイベント
$("done_btn").onclick = function() {
db.transaction(function(tr) {
for (var i in cbItems) {
var cb = cbItems[i];
if(!cb.checked) continue;
var query = "DELETE FROM todo_tbl WHERE todo_id=?";
tr.executeSql(query,[cb.value]);
}
},function(){ alert('削除失敗') },loadItems);
};
</script>




</body>
</html>

投稿日時 - 2014-05-14 13:18:36

QNo.8594757

すぐに回答ほしいです

質問者が選んだベストアンサー

> jQueryとJavaScriptでToDoメモを作っています
そもそもこのコードでjQueryは全く使ってないと思うけど
なんでjQueryを使っていると思い込んでいるの?


> <link rel="stylesheet"type="text/css"href="css/style.css">
type の前と hrefの前にスペースが無い。


> </center>
> <!--新規追加ボックス-->
開始タグが無いのに終了タグが出現している。
そもそもHTML5ではcenter使えない。


> このままコピペで使っていただけたらお分かりになると思いますが
Google Chromeでコピペしてやってみたけど、
・monacaの所は未定義なのでエラー
・css/style.cssは無いので読めない
・gear5-0.3.jsは無いので読めない
という状況下で、そんなに変な動作はしてないように見えた。
(削除ボタンはチェックを入れた項目を削除するんだよね?)
具体的に何がおかしいの?

ここに載せてないcss/style.cssが悪いと言うことは無いの?


そういえば、どのブラウザで動作確認してるの?

投稿日時 - 2014-05-14 20:37:24

補足

いろいろと変な文章ですみません
>そもそもこのコードでjQueryは全く使ってないと思うけど
最近JavaScriptを始めたばかりで
<div data-role="button" data-icon="plus" id="add_btn">追加</div>
はjQueryではないのでしょうか?

Chromで動作確認しています
正確にはMonacaのプレビューですね
・gear5-0.3.jsは無いので読めない
についてなのですがこれはAndroidの対応していないやつのみに出るので問題ありません
CSSは下記に張り付けます
そして具体的におかしいところなのですが
・追加ボタンの下に表示されるはずの削除ボタンが表示されていない
・テキストを書き込み追加を押すと追加ボタンの下に書き込んだテキストが表示されるはずなのにテキストは表示されず画面の一番上にチェックボックスだけが表示される
ということです

input.large[type="checkbox"] {
-webkit-appearance: none;
position: relative;
margin-right: 5px;
border-radius: 8px;
border: 2px solid #4c4c4c;
-webkit-box-sizing: border-box;
width: 20px;
height: 20px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#fdfdfd),
to(#d1d1d1)
);
}

/* チェック時は背景色を変更 */
input[type="checkbox"]:checked {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#FFFFFF),
to(#8f8f8f)
);
}

/* チェックの印を:before疑似要素と:after疑似要素を使って作成 */
input.large[type="checkbox"]:checked:before {
position: absolute;
left: 1px;
top: 17px;
display: block;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
content: "";
width: 10px;
height: 4px;
background: #FFFFFF;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: right center;
}

input.large[type="checkbox"]:checked:after {
display: block;
position: absolute;
left: 9px;
top: 17px;
content: "";
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
width: 19px;
height: 4px;
background: #FFFFFF;
-webkit-transform: rotate(-53deg);
-webkit-transform-origin: left center;
}

投稿日時 - 2014-05-14 21:08:27

お礼

自解しました

投稿日時 - 2014-05-15 14:52:38

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

jquery.jsがリンクされてないけど、ここへ書くの忘れただけなの?

投稿日時 - 2014-05-14 13:31:25

補足

ご回答ありがとうございます
現在Monacaという開発環境で組んでおりそこのプラグインでjQueryを入れているのでリンクさせなくとも大丈夫だと思います
今反映されていないのは削除ボタンですので
headerや追加ボタンはしっかりと反映しています
このままコピペで使っていただけたらお分かりになると思いますが
・削除ボタンが反映されていない
・追加を押したときにおかしなことになる
ここがどうしてこうなるのかがわかりません><

投稿日時 - 2014-05-14 16:18:40

あなたにオススメの質問