質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

351閲覧

クッキーに保存していた要素を削除後、空になった時にcssを追加

退会済みユーザー

退会済みユーザー

総合スコア0

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/11/21 13:23

●実現したいこと
削除ボタンを押し、クッキーに保存していたデータが削除された時に
diplay:noneのcssを追加

●不明な点
下記のソースを追加した場合、
削除前も削除後も、diplay:noneのcssが追加されない

javascript

1 if(($(saveBlock)).length){ 2 $("#saveBlock").prepend('<span>test</span>'); 3 } 4 else{ 5 ($("#saveBlock").css('display','none')); 6 }

ソース全文

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>タイトル</title> 6<script type="text/JavaScript" src="js/jquery.js"></script> 7<script type="text/JavaScript"> 8 // クッキーの値を取得 getCookie(クッキー名); // 9 function getCookie(c_name) { 10 var st = ""; 11 var ed = ""; 12 if (document.cookie.length > 0) { 13 // クッキーの値を取り出す 14 st = document.cookie.indexOf(c_name + "="); 15 if (st != -1) { 16 st = st + c_name.length + 1; 17 ed = document.cookie.indexOf(";", st); 18 if (ed == -1) ed = document.cookie.length; 19 // 値をデコードして返す 20 return unescape(document.cookie.substring(st, ed)); 21 } 22 } 23 return ""; 24 } 25 // クッキー保存 setCookie(クッキー名, クッキーの値, クッキーの有効日数); // 26 function setCookie(c_name, value, expiredays) { 27 // pathの指定 28 var path = location.pathname; 29 // pathをフォルダ毎に指定する場合のIE対策 30 var paths = new Array(); 31 paths = path.split("/"); 32 if (paths[paths.length - 1] != "") { 33 paths[paths.length - 1] = ""; 34 path = paths.join("/"); 35 } 36 // 有効期限の日付 37 var extime = new Date().getTime(); 38 var cltime = new Date(extime + (60 * 60 * 24 * 1000 * expiredays)); 39 var exdate = cltime.toUTCString(); 40 // クッキーに保存する文字列を生成 41 var s = ""; 42 s += c_name + "=" + escape(value);// 値はエンコードしておく 43 s += "; path=" + path; 44 if (expiredays) { 45 s += "; expires=" + exdate + "; "; 46 } else { 47 s += "; "; 48 } 49 // クッキーに保存 50 document.cookie = s; 51 } 52 53 // ②クッキーに値がセットされていれば値を表示 54 55 56 var vstitle1 = getCookie('vstitle1'); 57 var url1 = getCookie('url1'); 58 var vstitle2 = getCookie('vstitle2'); 59 var url2 = getCookie('url2'); 60 var vstitle3 = getCookie('vstitle3'); 61 var url3 = getCookie('url3'); 62 var vstitle4 = getCookie('vstitle4'); 63 var url4 = getCookie('url4'); 64 65// title、URLをクッキーに保存 66//①空きチェック forループで そのクッキーが存在するかをチェックし、保存処理をする 67 function TitleWrite() { 68 //初期値設定 69 var breakcunt = 4; 70 for( i=0; i<4; i++ ){ 71 if (getCookie('vstitle'+(i+1)) =="" && getCookie('url'+(i+1)) ==""){ 72 breakcunt = i; 73 break ; 74 } 75 } 76 if(breakcunt>3){ 77 window.alert('空きありません'); 78 return ""; 79 } 80 else{ 81 //タイトル、URL名を取得 82 setCookie('vstitle'+(breakcunt+1), $('.joblist_ttl').text(), 7); 83 setCookie('url'+(breakcunt+1), '.url', 7); 84 window.alert('保存しました'); 85 } 86} 87 88 function Title() { 89  if (getCookie('vstitle1') !=="" && getCookie('url1') !=="") { 90 $("p.visit").append('<p class="vs01"><a href="/'+ getCookie('url1') +'">' + getCookie('vstitle1')+'</a><button class="Titlebtn1"><span>×</span></button></p>'); 91 //削除ボタンクリックでクッキーの値を削除する 92 $(".Titlebtn1").click(function () { 93 var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換 94 document.cookie = "vstitle1 =; expires=" + dt.toUTCString(); 95 document.cookie = "url1 =; expires=" + dt.toUTCString(); 96 window.alert('削除しました'); 97 $("p.vs01").remove(); 98 }); 99 100 if(getCookie('vstitle2') !=="" && getCookie('url2') !=="") { 101 $("p.visit").append('<p class="vs02"><a href="'+ getCookie('url2') +'">' + getCookie('vstitle2')+'</a><button class="Titlebtn2"><span>×</span></button></p>'); 102 //削除ボタンクリックでクッキーの値を削除する 103 $(".Titlebtn2").click(function () { 104 var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換 105 document.cookie = "vstitle2 =; expires=" + dt.toUTCString(); 106 document.cookie = "url2 =; expires=" + dt.toUTCString(); 107 window.alert('削除しました'); 108 $("p.vs02").remove(); 109 }); 110 } 111 if(getCookie('vstitle3') !=="" && getCookie('url3') !=="") { 112 $("p.visit").append('<p class="vs03"><a href="'+ getCookie('url3') +'">' + getCookie('vstitle3')+'</a><button class="Titlebtn3"><span>×</span></button></p>'); 113 //削除ボタンクリックでクッキーの値を削除する 114 $(".Titlebtn3").click(function () { 115 var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換 116 document.cookie = "vstitle3 =; expires=" + dt.toUTCString(); 117 document.cookie = "url3 =; expires=" + dt.toUTCString(); 118 window.alert('削除しました'); 119 $("p.vs03").remove(); 120 }); 121 } 122 if(getCookie('vstitle4') !=="" && getCookie('url4') !=="") { 123 $("p.visit").append('<p class="vs04"><a href="'+ getCookie('url4') +'">' + getCookie('vstitle4')+'</a><button class="Titlebtn4"><span>×</span></button></p>'); 124 //削除ボタンクリックでクッキーの値を削除する 125 $(".Titlebtn4").click(function () { 126 var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換 127 document.cookie = "vstitle4 =; expires=" + dt.toUTCString(); 128 document.cookie = "url4 =; expires=" + dt.toUTCString(); 129 window.alert('削除しました'); 130 $("p.vs04").remove(); 131 }); 132 } 133 } 134   else{} 135 } 136 137$(function() { 138 Title(); 139 if(($(saveBlock)).length){ 140 $("#saveBlock").prepend('<span>test</span>'); 141 } 142 else{ 143 ($("#saveBlock").css('display','none')); 144 } 145}); 146 147</script> 148 149<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 150</head> 151<body> 152<div> 153<button id="setButton" onclick="TitleWrite();">保存する</button> 154<h3 class="jobtitle joblist_ttl"><span class="jobtitle"><a class="url" href="#test">福岡市事務</a></span></h3> 155<div id="saveBlock" class="saveBlock clearfix"><h3 class="savetitle"></h3><div id="visit"><p class="visit"></p></div> 156</div> 157</body> 158</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

変数saveBlockが未定義なので、if(($(saveBlock)).length){でエラー停止しているのでは、と拝察。
開発者ツールなどを使って、エラーメッセージを読むようにしてみてください。

投稿2017/11/22 12:03

Lhankor_Mhy

総合スコア36074

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問