jquery.cookie.jsを使ってリストの画像をそれぞれ切り替えたい

Question

実装したいこと

■index.php
<ul>
<li><a href="/1.php"><img src="images/img1.jpg"></a></li>
<li><a href="/2.php"><img src="images/img2.jpg"></a></li>
<li><a href="/3.php"><img src="images/img3.jpg"></a></li>
<li><a href="/4.php"><img src="images/img4.jpg"></a></li>
</ul>

例えば、img1.jpgのリンクをクリックしたら

<li><a href="/1.php"><img src="images/img1-active.jpg"></a></li> に画像パスを書き換え、ページに戻ってきても「img1-active.jpg」のままにしたいです。 ### 使用js jquery　3.4.1 jquery.cookie.js　1.4.1

試したこと・不明点

$.cookie("test", 0, { expires: 1 });
var hoge = $("ul li a");

function check(){
　var hoge_img = hoge.children("img").attr("src");
　if($.cookie("test") == 1) {
　　var hoge_change = hoge_img.replace(".jpg", "-active.jpg");
　　hoge.children("img").attr("src", hoge_change);
　}
};

$("ul li a").on("click", function(){
　$.cookie("test", 1);
　check();
});

上記のコードを記述したのですが、
まず画像をクリックすると全ての画像パスが変わってしまいます。
これは「function check()」の中で<li>の画像パス全てを参照してしまっているのが原因なのはわかるのですが、
この中で$(this)を使えないので解決策が思い浮かびません。

次に、cookie”test”を、ボタンクリックで0から1に値を上書きしているのですが
ページを更新するともとに戻ってしまいます。
こちらも、原因は一行目のcookieをセットする記述があるからだとはわかるのですが
ではどこに記述すれば・・・？と悩んでおります。

上記の記述からどう変えていけばうまく動作するのか、アドバイスをお願いいたします。

※関係ないとは思いますが、まだサーバにアップする前でMAMPを使用してローカルで作業しています。

Comments

[yambejp]

アンカーをクリックして画像を変更するだけなら、アンカーはいらなくないですか？

[pppx]

yambejpさん、コメントありがとうございます。
アンカーというのは「アンカーリンク」の認識で合っていますか？
今回アンカーリンクは使用しておりませんが、別の箇所のことでしたらすみませんがお教えください。

[yambejp]

<a href="/1.php"><img src="images/img1.jpg"></a>
をクリックしたら
<a href="/1.php"><img src="images/img1-active.jpg"></a>
になるんですよね？

[pppx]

はい、上記で合っております。
1.phpへ遷移した後にindex.phpへ戻ったり、index.phpを再読み込みしても「-active」がついたままにしたいです。

Answer 1

function changeImgSrc(t){
  if($(t).is('img[src$=".jpg"]:not([src$="-active.jpg"])')){
    $.cookie('imgIndex',$('img').index(t));
    $('img[src$="-active.jpg"]').attr('src',function(){return $(this).attr('src').replace(/-active(?=.jpg$)/,'')});
    $(t).attr('src',$(t).attr('src').replace(/(?=.jpg$)/,'-active'));
  }
}
$(function(){
  if($.cookie('imgIndex')) changeImgSrc($('img').eq($.cookie('imgIndex')));
  $('a').on('click',function(e){
    e.preventDefault();
    changeImgSrc(e.target);
    setTimeout(function(){
      location.href=$(this).closest('a').attr('href');
    }.bind(this),100);
  });
});

Comments

[pppx]

ご回答いただき、ありがとうございます。
自分で調べていくうちに、もしかして画像パスの操作はできないのでは・・・と思っていたのですが、できないことはないのですね。大変勉強になります。
考えてくださった記述なのですが、確かにページ遷移や再読み込みをしてもパスが変わったままになっていましたが
img2やimg3をクリックすると、クリックしていたimg1がもとに戻ってしまいます。
説明が不足しており申し訳ございません。クリックした要素は全て「-active」をつけるようにするにはどのように記述を加えれば宜しいでしょうか。

[yambejp]

どれか一つがactiveになったら他のactiveは外すものと解釈したのですが違うのですね？
activeをもう一度クリックするとアクティブが外れるとかも不要ですか？

[pppx]

わかりにくく申し訳ございません。
クリックした要素は全て「-active」がつくように、クッキー削除しない限り「-active」がついたままで問題ございません。

[yambejp]

function changeImgSrc(idxs){
$('img').filter(function(){
return $(this).is('[src$=".jpg"]:not([src$="-active.jpg"])') && idxs.indexOf($('img').index(this))>-1;
}).attr('src',function(){
return $(this).attr('src').replace(/(?=.jpg$)/,'-active');
});
}
$(function(){
changeImgSrc(JSON.parse($.cookie('imgIndex')||'[]'));;
$('#del').on('click',function(){
$.removeCookie('imgIndex');
});
$('a').on('click',function(e){
if($(e.target).is('img[src$=".jpg"]:not([src$="-active.jpg"])')){
e.preventDefault();
var idxs=JSON.parse($.cookie('imgIndex')||'[]');
var idx=$('img').index(e.target);
if(idxs.indexOf(idx)==-1){
idxs.push(idx);
$.cookie('imgIndex',JSON.stringify(idxs));
}
changeImgSrc(idxs);
setTimeout(function(){
location.href=$(this).closest('a').attr('href');
}.bind(this),100);
}
});
});