前提・実現したいこと

選択された要素を非表示にし、それをcookieを使い保存しています。
これらの処理をまとめるにはどの様にすればよいのでしょうか？
よろしくお願いします。

発生している問題

要素が増える度にJavaScriptのコードが増大してしまう。

該当のソースコード

HTML
1<a class="AAA">AAAの要素を表示しない</a>
2<a class="BBB">BBBの要素を表示しない</a>
3
4<div class="AAA">AAAの要素</div>
5<div class="BBB">BBBの要素</div>

JavaScript
1$(function(){
2  if($.cookie("AAA")){
3    $("div.AAA").hide();
4  }
5  $("a.AAA").click(function() {
6    if($.cookie("AAA")){
7      $("div.AAA").slideDown();
8      $.removeCookie("AAA" , { path: "/" });
9    } else {
10      $("div.AAA").slideUp();
11      $.cookie("AAA" , "mute" , { expires: 999,  path: "/" });
12    }
13  return false;
14  });
15});
16$(function(){
17  if($.cookie("BBB")){
18    $("div.BBB").hide();
19  }
20  $("a.BBB").click(function() {
21    if($.cookie("BBB")){
22      $("div.BBB").slideDown();
23      $.removeCookie("BBB" , { path: "/" });
24    } else {
25      $("div.BBB").slideUp();
26      $.cookie("BBB" , "mute" , { expires: 999,  path: "/" });
27    }
28  return false;
29  });
30});

kei344

2018/03/26 11:57

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

yasaidaikon

2018/03/26 12:09

失礼しました。修正させていただきました。

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

回答3件

比較的、基礎的な構文で解決すると思われる為、ヒントだけ出します。
似た処理をまとめるポイントは2つあります。

関数化し、関数を複数回呼び出す
データを配列化し、for 文などの繰り返し構文でまとめる

コードを読んでみると、2つのコードで異なる部分は次の2箇所です。

セレクタ文字列
$.cookie の第一引数

上記、2箇所を変数化し、関数or繰り返し構文で書き直してみて下さい。

Re: yasaidaikon さん

投稿2018/03/26 12:29

think49

総合スコア18162

yasaidaikon

2018/03/27 13:04

ヒントありがとうございます。これを参考に勉強をし、今後似た問題に当たった際には自力で解決できるよう励みます。

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

$.removeCookie("A"

"A"ではなく"AAA"にしてみては？

sample

グルーピングの仕方がちょっとおかしそうなので以下でどうでしょう？

javascript
1$(function(){
2  $("a.togglecookie").each(function(){
3    var id=$(this).attr('id');
4    $("div."+id).toggle(!$.cookie(id));
5  }).on('click',function() {
6    var id=$(this).attr('id');
7    $("div."+id).slideToggle($.cookie(id));
8    $.cookie(id)?$.removeCookie(id):$.cookie(id,"mute");
9  });
10});

HTML
1<a id="AAA" class="togglecookie">AAAの要素を切り替える</a>
2<a id="BBB" class="togglecookie">BBBの要素を切り替える</a>
3<a id="CCC" class="togglecookie">CCCの要素を切り替える</a>
4
5<div class="AAA">AAAの要素</div>
6<div class="BBB">BBBの要素</div>
7<div class="CCC">CCCの要素</div>

投稿2018/03/26 12:17

編集2018/03/26 13:03

yambejp

総合スコア114825

yasaidaikon

2018/03/26 12:25

質問を書く際に打ち間違えてしまいました。修正しました。すみません。

yasaidaikon

2018/03/27 13:02

とんでもない簡略化をありがとうございます。凄すぎて何がどうなっているのか全く分かりませんが、ばっちり動作していました。感謝です。

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

ベストアンサー

まず、これが

jQuery
1<script>
2$(function()
3{
4    if($.cookie("AAA"))
5    {
6        $("div.AAA").hide();
7    }
8
9    $("a.AAA").click(function()
10    {
11        if($.cookie("AAA"))
12        {
13            $("div.AAA").slideDown();
14            $.removeCookie("A" , { path: "/" });
15        }
16        else
17        {
18            $("div.AAA").slideUp();
19            $.cookie("AAA" , "mute" , { expires: 999,  path: "/" });
20        }
21        
22        return false;
23    });
24});
25
26$(function()
27{
28    if($.cookie("BBB"))
29    {
30        $("div.BBB").hide();
31    }
32
33    $("a.BBB").click(function()
34    {
35        if($.cookie("BBB"))
36        {
37            $("div.BBB").slideDown();
38            $.removeCookie("A" , { path: "/" });
39        }
40        else
41        {
42            $("div.BBB").slideUp();
43            $.cookie("BBB" , "mute" , { expires: 999,  path: "/" });
44        }
45
46        return false;
47    });
48});
49</script>
50
51<body>
52    <a class="AAA">AAAの要素を表示しない</a>
53    <br>
54    <a class="BBB">BBBの要素を表示しない</a>
55
56    <div class="AAA">AAAの要素</div>
57    <div class="BBB">BBBの要素</div>
58</body>

こうなって、

jQuery
1<script>
2$(function()
3{
4    if($.cookie("AAA"))
5    {
6        $("div.AAA").hide();
7    }
8
9    $("a.AAA").click(function()
10    {
11        if($.cookie("AAA"))
12        {
13            $("div.AAA").slideDown();
14            $.removeCookie("A" , { path: "/" });
15        }
16        else
17        {
18            $("div.AAA").slideUp();
19            $.cookie("AAA" , "mute" , { expires: 999,  path: "/" });
20        }
21        
22        return false;
23    });
24    
25    if($.cookie("BBB"))
26    {
27        $("div.BBB").hide();
28    }
29
30    $("a.BBB").click(function()
31    {
32        if($.cookie("BBB"))
33        {
34            $("div.BBB").slideDown();
35            $.removeCookie("A" , { path: "/" });
36        }
37        else
38        {
39            $("div.BBB").slideUp();
40            $.cookie("BBB" , "mute" , { expires: 999,  path: "/" });
41        }
42
43        return false;
44    });
45});
46</script>
47
48<body>
49    <a class="AAA">AAAの要素を表示しない</a>
50    <br>
51    <a class="BBB">BBBの要素を表示しない</a>
52
53    <div class="AAA">AAAの要素</div>
54    <div class="BBB">BBBの要素</div>
55</body>

こうなるのじゃ。

jQuery
1<script>
2$(function()
3{
4    if($.cookie("AAA")){ $("#AAA").hide(); }
5    if($.cookie("BBB")){ $("#BBB").hide(); }
6    
7    $("a.toggle").on("click", function()
8    {
9        if($.cookie($(this).data("symbol")))
10        {
11            $("#" + $(this).data("symbol")).slideDown();
12            $.removeCookie($(this).data("symbol") , { path: "/" });
13        }
14        else
15        {
16            $("#" + $(this).data("symbol")).slideUp();
17            $.cookie($(this).data("symbol") , "mute" , { expires: 999,  path: "/" });
18        }
19        
20        return false;
21    });
22});
23</script>
24
25<body>
26    <a data-symbol="AAA" class="toggle">AAAの要素を表示しない</a>
27    <br>
28    <a data-symbol="BBB" class="toggle">BBBの要素を表示しない</a>
29
30    <div id="AAA">AAAの要素</div>
31    <div id="BBB">BBBの要素</div>
32</body>

####追記

さらに、こうなったのじゃ。

jQuery
1<script>
2$(function()
3{
4    let symbols = ["AAA", "BBB"];
5    
6    for(let idx in symbols)
7    {
8        if($.cookie(symbols[idx])){ $("#" + symbols[idx]).hide(); }
9    }
10
11    $("a.toggle").on("click", function()
12    {
13        if($.cookie($(this).data("symbol")))
14        {
15            $("#" + $(this).data("symbol")).slideDown();
16            $.removeCookie($(this).data("symbol") , { path: "/" });
17        }
18        else
19        {
20            $("#" + $(this).data("symbol")).slideUp();
21            $.cookie($(this).data("symbol") , "mute" , { expires: 999,  path: "/" });
22        }
23        
24        return false;
25    });
26});
27</script>
28
29    </head>
30<body>
31    <a data-symbol="AAA" class="toggle">AAAの要素を表示しない</a>
32    <br>
33    <a data-symbol="BBB" class="toggle">BBBの要素を表示しない</a>
34
35    <div id="AAA">AAAの要素</div>
36    <div id="BBB">BBBの要素</div>
37</body>

####さらに追記

止まらなくなったのじゃ。

jQuery
1<script>
2$(function()
3{
4    $("a.toggle").on("click", function()
5    {
6        if($.cookie($(this).data("symbol")))
7        {
8            $("#" + $(this).data("symbol")).slideDown();
9            $.removeCookie($(this).data("symbol") , { path: "/" });
10        }
11        else
12        {
13            $("#" + $(this).data("symbol")).slideUp();
14            $.cookie($(this).data("symbol") , "mute" , { expires: 999,  path: "/" });
15        }
16        
17        return false;
18    })
19    .each(function()
20    {
21        let symbol = $(this).data("symbol");
22        if($.cookie(symbol)){ $("#" + symbol).hide(); }
23    });
24});
25</script>
26
27<body>
28    <a data-symbol="AAA" class="toggle">AAAの要素を表示しない</a>
29    <br>
30    <a data-symbol="BBB" class="toggle">BBBの要素を表示しない</a>
31
32    <div id="AAA">AAAの要素</div>
33    <div id="BBB">BBBの要素</div>
34</body>