0

選択した要素をブラウザに記憶させたい。js-cookie を使用するのは初めてで、ドキュメントが非常に不足しています。私の経験不足も役に立たないので、ここで助けを求めることにしました。

HTML

   <ul>
      <li class='selected' id='item1'>
        <img src='https://dummyimage.com/100x100/000/fff'/>
      </li>

      <li id='item2'>
        <img src='https://dummyimage.com/100x100/000/fff'/>
      </li>

      <li id='item3'>
        <img src='https://dummyimage.com/100x100/000/fff'/>
      </li>
    </ul>

CSS

ul{margin:0;padding:0}
li{float:left;list-style-type:none}
img{margin-left:5px}
.selected img{border:3px solid red}

脚本

$('li').on('click', function(){
    $(this).siblings().removeClass('selected')
    $(this).addClass('selected');
})

これが私が達成しようとしていることの JsFiddle です。https://jsfiddle.net/cb7pf26u/3/

4

1 に答える 1

0

ローカルに保持し、サーバーに渡す必要のないデータの場合は、ローカルストレージに保持するよりもクックに保持することをお勧めします。Cookie はリクエストごとにサーバーに戻され、リソースを浪費する必要はありません。

ここにあなたのためのフィドルがあります - https://jsfiddle.net/denov/cb7pf26u/4/

function setStyle(node) {
    node.siblings().removeClass('selected')
    node.addClass('selected');
}

function startup() {
    var defaultId = 'item1';
        lastId = localStorage.getItem('keep_track_example') || defaultId;            

    $('li').on('click', function(){
        setStyle($(this));
        localStorage.setItem('keep_track_example', $(this).attr('id'));
    })

    setStyle($('#'+lastId));    
}


startup();

本当に Cookie を使用したい場合は、localstorage への呼び出しを次のように置き換えるだけです。$.cookie()

于 2016-11-12T01:45:58.103 に答える