JqueryページリロードしてDivを選択

Question

私はそのページにフォームを含む複数のdivを持っています。ユーザーがdivをクリックしてフォームを送信すると、ページがリロードされます。そのリロードの後、私はページをリロードする前にユーザーが選択した特定のdivにクラスを追加して、ページのリロード後にそのクラスを識別したいと考えています。

私の質問は、ページのリロード後にその特定のdivのIDを保持するにはどうすればいいですか？

<div id="1"></div> 
<div id="2"></div> 
<div id="3"></div> 

<script> 
    $(document).ready(function() { 
     // What needs to go here...? 
    }); 
</script> 

ありがとうございます！

Answer 1

最後に選択したdivを任意の場所に保存する必要があります。 ローカルストレージ、クッキーなどを使用できます。また、特定のdivを知ることができないため、サイトをリフレッシュして選択したdivを知るために、urlに追加のパラメータを送信することもできます。

よろしくお願いいたします。

Answer 2

uramsにparamsを使用できます。

<script> 
    $(document).ready(function(){ 
      function getUrlVars() { 
       var vars = [], hash; 
       var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
       for(var i = 0; i < hashes.length; i++) 
       { 
        hash = hashes[i].split('='); 
        vars.push(hash[0]); 
        vars[hash[0]] = hash[1]; 
       } 
       return vars; 
      } 
    var myParam = = getUrlVars()['myparam']; 
    if (myParam == 'first') { 
     // do here whatever you want, you kwow the first div was clicked 
    } 


    $('#1').click(function(){ 
     window.location = 'index?myparam=first'; 
    }) 

    }) 
</script> 

Answer 3

localStorageまたはsessionStorageを使用できます。私は個人的にlocalStorageを使用します。

//inside document ready 
$('#1').click(function() { 
localStorage.setItem("One", "clicked") 
} 
$('#2').click(function() { 
localStorage.setItem("Two", "clicked") 
} 
$('#3').click(function() { 
    localStorage.setItem("Three", "clicked") 
} 
window.onload = get() 
function get() { 
    var One = localStorage.getItem("One") 
    var Two = localStorage.getItem("Two") 
    var Three = localStorage.getItem("Three") 
    //then if the var is equal to click, do what you want to it. 
} 

Answer 4

これを行うには2つの方法があります。最初の1つ（絶対にページ全体をリロードする必要がある場合）：GETパラメータをフォーム送信に追加してから、JavaScriptでチェックします。

http://example.com/submit.php?selected_div=div_id&other_selected_div=div_id 

This post explains how to retrieve GET parameters in Javascript

しかし、フォームを送信して、呼び出しが成功した後、あなたのDOMを変更する（またはエラーメッセージを表示）するためにAJAX呼び出しを使用する方がはるかに簡単になります。この方法では、ページをリロードしても何も保持する必要はありません。

これはjQueryを使用して行うことができます。それはhere in the official docsに記載されているとthis tutorial.