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

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

ただいまの
回答率

87.60%

JQUERYで配列の操作がうまくいかないです

解決済

回答 2

投稿 編集

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

score 12

前提

JQUERYのcookie.jsでクッキーの保存をするときに、このようなボタンのdata-idを拾ってクッキーに保存していこうと考えてます。

ボタンはたくさんあり、クリックすると「.check」が「.uncheck」になります。

<button type="button" data-id="1" class="check_btn uncheck">チェック済</button>
<button type="button" data-id="2" class="check_btn check">チェック</button>

実現したいこと

クリック済みである「.uncheck」をクリックしたときには、そのdata-idをクッキーから削除したいんですけど、そのときにカンマが残ってしまうので、これを削除したいです。

たとえば「4%2C2」のときに「4」の「.uncheck」をクリックしたときは「2」だけを保存したいのに、「%2C2」のような感じでカンマ(%2C)が残ったままクッキーに保存されてしまうんです。

試したこと

↓現在のコードです

$(function(){
    $(document).on("click",".check_btn.check", function(){
        $(this).removeClass('check').addClass('uncheck');
        var current_checkId = $.cookie("check");
        var click_checkId = $(this).attr('data-id');
        if (current_checkId) {    
            var result_checkId = click_checkId + ',' + current_checkId;
        }else{
            var result_checkId = click_checkId;
        }
        $.cookie( "check", result_checkId,{ expires: 730, path:'/'} );            
  });
    $(document).on("click",".check_btn.uncheck", function(){
        $(this).removeClass('uncheck').addClass('check');
        var current_checkId = $.cookie("check");
        var click_checkId = $(this).attr('data-id');    
        if (current_checkId) {
            var current_checkId_array = current_checkId.split(',');
            var idx = current_checkId_array.indexOf(click_checkId);
            if (idx != -1){
                current_checkId_array.splice(idx, 1);
            }                
            var result_checkId = current_checkId.replace(click_checkId, "");
        }else{
            var result_checkId = click_checkId;
        }        
        $.cookie( "check", result_checkId,{ expires: 730, path:'/'} );            
  });
});    


普通はどのように書くべきかなど、もっとちゃんとした書き方もあったら教えてほしいです。よろしくお願い致します!

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+3

専用の$.removeCookieというものが用意されています(README)。

なお、jQuery.cookieはjs-cookieに開発が移行している、とのことです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/21 17:05

    …。

    キャンセル

  • 2019/01/21 17:07

    それはcookieを消すのではなくて、cookieの値の変更になりますから、そういうことしたければ自力で値を編集して再設定するしかないと思いますが。

    キャンセル

  • 2019/01/22 04:00

    仰る通りだと思います。

    キャンセル

checkベストアンサー

+1

cookieに保存した文字列を配列にして処理し、保存する時に文字列に戻せばよいです。

【【JavaScript入門】joinで配列を連結する方法(改行/置換) | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/23137

【JavaScript - indexOf() を使って配列の要素を削除する | ITライフ】
https://infoteck-life.com/a0094-js-array-delete-indexof/

【String.prototype.split() | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split

【Array.prototype.join() | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/22 03:59 編集

    あぁ、こういう方向性のご回答が欲しかったんです。ありがとうございます。配列を使った方式のコードですが、質問のコードをそういう流れに直したのですが、これだとどこがいけませんか?もしよかったら教えてください。

    キャンセル

  • 2019/01/22 11:02

    current_checkId_arrayがクッキーに入っていません。

    回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

    キャンセル

  • 2019/01/22 14:51

    どうもありがとうございます。なるほど、失礼致しました。

    キャンセル

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

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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