実現したいこと

画像が多く羅列されているページにて
jquery.cookie.jsを用いて
画像を非表示ボタン押下　→　画像を非表示（display:none;にする）
画像を表示ボタン押下　→　画像を表示
リロード時は値を保持。
（画像を非表示のままリロードした場合画像の読み込みはしない。）

以上のことを実現したいのですが、どのようにやるのがよいでしょうか
PHP初心者のため、ご教授いただければ幸いです。

※補足
PHPを使う理由
・ボタンの表記変更（画像を非表示　表示の切り替え）
・画像の取得をPHPで行っているため

画像表示の状態でリロード　→　画像を読み込むかつ「画像を非表示ボタン」が出る
画像非表示の状態でリロード　→　画像を読み込まないかつ「画像を表示」ボタンが出る

うまく文章にできずすみません。このようなイメージです。

m.ts10806

2019/10/29 05:40

なぜphpの必要性が出てきたのか経緯や背景も書かれた方がより得たい回答を得られると思います

m.ts10806

2019/10/29 05:41

あとひとつのことを実現するための手段はひとつではなく、利用者にとっては単に「そう動く」ことが正解なので、実装方法に正解はありません。質問のしかたを変えた方が良いかと思います(質問は編集できます)

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

回答1件

ベストアンサー

PHPは不要です
jsで保持しているcoookieの値を見て、適用するimgを
toggle()すればいいでしょう。

sample

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
3<script>
4$(function(){  
5  $('#btn').on('click',function(e){
6    var flg=false;
7    if(typeof e.originalEvent==="undefined"){
8      flg=$.cookie('img_show')!=="0";
9    }else{
10      flg=$(this).val()=="表示";
11      $.cookie('img_show',flg?"1":"0")
12    };
13    $(this).val(flg?"非表示":"表示");
14    $('.target').toggle(flg);
15  }).trigger('click');
16});
17</script>
18<input type="button" value="非表示" id="btn">
19<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" alt="1" class="target">
20<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2" alt="2">
21<img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3" alt="3" class="target">
22