Question

自分のHTMLコードは次のようになります（下図参照）。

<div class='row hide' data-step='{$row['qid']}' data-title='{$row['question']}'>"; 

    while($row1=mysql_fetch_array($result1,MYSQL_ASSOC)){ 
     echo "<div class='col-lg-3 col-md-4 col-s-6 thumb' > 
      <a class='thumbnail btt' href='#' id='{$row1['imageid']}'> 
       <img class='' src='{$row1['thumbpath']}' alt=''> 
       <div class='overlay'> </div> 
      </a> 
     </div>"; 
    } 
echo "</div>"; 

画像がループを通って行くことによって一つ一つが表示されます、それがハイライトされますクリックされたとき、私はそうオーバーレイを追加しました。私は、ユーザが複数の画像を選択することを可能にした。 1つ以上のイメージを強調表示することができます。

画像をクリックすると、そのIDがローカルストレージに保存されます。今、私のjQueryのです：

function storeId(id) { 
    var ids = JSON.parse(localStorage.getItem('reportArray')) || []; 
    if (ids.indexOf(id) === -1) { 
     ids.push(id); 
     localStorage.setItem('reportArray', JSON.stringify(ids)); 
    } 
    return id; 
} 

$(function() { 
    $('.btt').click(function() { 
     var id = $(this).attr('id'); 
     storeId(id); 

     $('#currentLCV').text(localStorage.getItem('reportArray')); 
    }); 
}); 

$('.btt').click(function(){ 
    $(this).toggleClass('overlay overlay2'); 
}); 

私はこれが今の問題を労働者階級の#currentLCVでのdivを通じて再びHTML内のローカルストレージの値を表示することができます。

しかし、ユーザーがイメージをクリックするとローカルストレージにIDが保存され、ユーザーが同じイメージを再度クリックするとIDがローカルストレージから削除されるトグルオプションが必要です。

助けてもらえますか？

Answer 1

あなたはこのようなものを使用することができます。

function storeId(id) { 
    var ids = JSON.parse(localStorage.getItem('reportArray')) || []; 
    if (ids.indexOf(id) === -1) { 
     ids.push(id); 
     localStorage.setItem('reportArray', JSON.stringify(ids)); 
    } 
} 

function unStoreId(id) { 
    var ids = JSON.parse(localStorage.getItem('reportArray')) || []; 
    var indx = ids.indexOf(id); 
    if (indx !== -1) { 
     ids.splice(indx,1); 
     localStorage.setItem('reportArray', JSON.stringify(ids)); 
    } 
} 

$('.btt').click(function() { 
    var id = $(this).attr('id'); 
    $(this).toggleClass('overlay overlay2 stored'); 
    if($(this).hasClass("stored")) { 
     unStoreId(id); 
    } else { 
     storeId(id); 
    } 

    $('#currentLCV').text(localStorage.getItem('reportArray')); 
}); 

注：が一緒.bttイベントに参加し、機能のラッパーを削除しました。

Answer 2

あなたのstoreIdを（更新）し、その内のIDの削除コードを処理するためのロジックを追加することができます...

function storeId(id) { //toggleStoreId() 
     var ids = JSON.parse(localStorage.getItem('reportArray')) || []; 
     if (ids.indexOf(id) === -1) { 
      //First time image click then store it in localstorage 
      ids.push(id); 
      localStorage.setItem('reportArray', JSON.stringify(ids)); 
     } else { 
      //On second time image click remove id from localstorage 
      ids.splice(ids.indexOf(id),1); 
      localStorage.setItem('reportArray', JSON.stringify(ids)); 
     } 
     return id; 
    } 

、について説明：あなたは、あなたのstoreId（）を更新し、unstore処理する必要が

他のシナリオで同じ条件を使用し、ローカルストレージ配列からIDを削除してください...それが役立つことを願って...