Bdtjtk

I have an ID in html. This id is assigned to Django variable which contain ads ID. I want to add this ads ID to favorite list using local storage (cookies). Now, this ID is inside a loop and for every single ads will take different ID. The question is how to select the specific ID when the user click on that specific ID icons.

Here is my code:

{% for item in result %}

    <span id="favouriteBtn" style="color:#ccc" title="add this post to favorite list"> ☆ </span>

{% endfor %}

THE ID SHOULD BE THIS WAY:

id={{item.id}}

Here is portion of javascript function:

$('#favouriteBtn').click(function(){

currentAddFav();

I want to set the ID as :

id={{item.id}}

and be able to select specific id which has been clicked by the user. How can i do that?

the currentAddFav function is as follow:

function currentAddFav(){

if(localStorage.getItem('favourites')){//If there are favourites

    var storage = JSON.parse(localStorage['favourites']);

    if (storage.indexOf('data-item-id') == -1) { 

      // # not found

      storage.push('data-item-id');

      localStorage.setItem('favourites', JSON.stringify(storage));

    } else {

      // # found

      console.log('item already in favorites')

    }



}           

else

{//No favourites in local storage, so add new

    var favArray= ;

    favArray.push('data-item-id');

    localStorage.setItem("favourites", JSON.stringify(favArray));

    console.log('New favourites list');

}

}

You can edit your span to have an attribute named 'data-item-id' which is equal to your item's id, like this:

{% for item in result %}

    <span id="favouriteBtn" onclick="currentAddFav({{ item.id }})" style="color:#ccc" title="add this post to favorite list"> ☆ </span>

{% endfor %}

The "currentAddFav" function can handle the rest of the process (such as adding to Cookie, or whatever, from here.

Your "currentAddFav" function may look like this:

function currentAddFav(item_id){

    if (localStorage.getItem('favourites')) { // If there are favourites

        var storage = JSON.parse(localStorage['favourites']);

        if (storage.indexOf(item_id) == -1) { 

          // not found

          storage.push(item_id);

          localStorage.setItem('favourites', JSON.stringify(storage));

        } else {

          // found

          console.log('item already in favorites')

        }



    } else { // No favourites in local storage, so add new

        var favArray= ;

        favArray.push(item_id);

        localStorage.setItem("favourites", JSON.stringify(favArray));

        console.log('New favourites list');

    }

}

you can try like this :

{% for item in result %}

    <span id="{{ item.id }}" style="color:#ccc" title="add this post to favorite list"> ☆ </span>

    <script type="text/javascript">

        var id_selected = "{{ item.id }}";

    </script>

{% endfor %}

and when your page loading finish, you can add click function in this var id_selected

$('#' + id_selected).click(function () {

        currentAddFav();

});