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

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

ただいまの
回答率

91.37%

  • JavaScript

    11191questions

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

  • Cookie

    131questions

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

動的にクッキー名を保存し表示したいが、 1つのクッキーの値しか表示されない

受付中

回答 0

投稿 2017/11/20 20:09

  • 評価
  • クリップ 0
  • VIEW 58

mika160625

score 30

<実現したいこと>
保存したクッキー名vstitle1の値とurl1の値を
順番にvstitle1が空じゃなかったら、値を表示させる
vstitle2が空じゃなかったら、値を表示させるを
vstitle4まで繰り返す

<現在の問題点>
動的に表示させたいため、
forでループさせているのですが、
表示はvstitle1のみしか表示されません。
デバックで確認したところ、
iが、クリックイベントが実行される時には常に4と表示されます。

クッキーを確認すると、値は、別のものが保存されていましたが、
表示はされないという状態です。

申し訳ありません、
何かご教授頂けたら大変助かります。

◆問題の箇所

  // ④クッキー保存したデータを表示 //
       function Title(){
        var breakcunt = 4;
          for( i=0; i<4; i++ ){
        if (getCookie('vstitle'+(i+1)) !=="" && getCookie('url'+(i+1)) !==""){
            $("p.visit").append('<p class="vs0' +(i+1) +' "><a href="'+ getCookie('url'+(i+1)) +'">' + getCookie('vstitle'+(i+1)) +'</a><button id="Titlebtn' +(i+1) +' "><span>削除</span></button></p>');
        $('#Titlebtn'+(i+1)).click(function (){
                 var i = 0;
                console.log("'vstitle'+(i+1) =; max-age=0");
                console.log("'url'+(i+1) =; max-age=0");
                window.alert('削除');
                 $("p.vs"(i+1)).remove();
        }); 
        breakcunt = i;
        break ; 
        }
        }
        if(breakcunt>3){
            return "";
        }
        else{
        }}

こちらがソース全文になります。

<script type="text/JavaScript">
            // ①クッキーの値を取得 getCookie(クッキー名); //
        function getCookie(c_name) {
            var st = "";
            var ed = "";
            if (document.cookie.length > 0) {
                // クッキーの値を取り出す
                st = document.cookie.indexOf(c_name + "=");
                if (st != -1) {
                    st = st + c_name.length + 1;
                    ed = document.cookie.indexOf(";", st);
                    if (ed == -1) ed = document.cookie.length;
                    // 値をデコードして返す
                    return unescape(document.cookie.substring(st, ed));
                }
            }
            return "";
        }

   // ②クッキー保存 setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
        function setCookie(c_name, value, expiredays) {
            // pathの指定
            var path = location.pathname;
            // pathをフォルダ毎に指定する場合のIE対策
            var paths = new Array();
            paths = path.split("/");
            if (paths[paths.length - 1] != "") {
                paths[paths.length - 1] = "";
                path = paths.join("/");
            }
            // 有効期限の日付
            var extime = new Date().getTime();
            var cltime = new Date(extime + (60 * 60 * 24 * 1000 * expiredays));
            var exdate = cltime.toUTCString();
            // クッキーに保存する文字列を生成
            var s = "";
            s += c_name + "=" + escape(value);// 値はエンコードしておく
            s += "; path=" + path;
            if (expiredays) {
                s += "; expires=" + exdate + "; ";
            } else {
                s += "; ";
            }
            // クッキーに保存
            document.cookie = s;
        }
        // ④クッキー保存したデータを表示 //
       function Title(){
        var breakcunt = 4;
          for( i=0; i<4; i++ ){
        if (getCookie('vstitle'+(i+1)) !=="" && getCookie('url'+(i+1)) !==""){
            $("p.visit").append('<p class="vs0' +(i+1) +' "><a href="'+ getCookie('url'+(i+1)) +'">' + getCookie('vstitle'+(i+1)) +'</a><button id="Titlebtn' +(i+1) +' "><span>削除</span></button></p>');
        $('#Titlebtn'+(i+1)).click(function (){
                 var i = 0;
                console.log("'vstitle'+(i+1) =; max-age=0");
                console.log("'url'+(i+1) =; max-age=0");
                window.alert('削除');
                 $("p.vs"(i+1)).remove();
        }); 
        breakcunt = i;
        break ; 
        }
        }
        if(breakcunt>3){
            return "";
        }
        else{
        }}

     // ③クッキーにデータを保存 //
    function TitleWrite() {
        var breakcunt = 4;
        for( i=0; i<4; i++ ){
        if (getCookie('vstitle'+(i+1)) =="" && getCookie('url'+(i+1)) ==""){
        breakcunt = i;
        break ;
        }
        }
        if(breakcunt>3){
            window.alert('保存できません。');
            return "";
        }
        else{
          setCookie('vstitle'+(breakcunt+1), $('.joblist_ttl').text(), 7);
          setCookie('url'+(breakcunt+1),$('.url').text(), 7);
          window.alert('保存しました。');
          Title();
        }
}
$(function() {
     Title();
});

</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Lhankor_Mhy

    2017/11/22 20:58

    質問が理解しきれていないのでこちらに書きますが、「vstitle1の値とurl1の値が空ではない時に」breakでループを抜けるのが原因ではないのですか? このコードだと出力は1回しかありえなさそうですが。

    キャンセル

まだ回答がついていません

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

ただいまの回答率

91.37%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11191questions

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

  • Cookie

    131questions

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