JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css">
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<h1>Menu</h1>
</div>
<div data-role="content">
<div class="example-wrapper">
<ul data-role="listview" id="page_list" data-theme="a">
<li><a href="#shops">All Shops</a></li>
<li><a href="#topten">Top 10</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#map">Map</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="shops">
<div data-role="header">
<a href="#" data-role="button" data-iconpos="notext" data-rel="back" data-icon="arrow-l" data-iconshadow="false">Back</a>
<h1>Search</h1>
<a href="#sort_popup" class="ui-btn-right" data-rel="popup">Sort</a>
</div>
<div data-role="content">
<ul class='resultsList' id="list_results" data-role="listview" data-split-icon="gear" data-split-theme="a" data-filter-reveal="true" data-inset="false">
<!-- keep empty for dynamically added items -->
</ul>
</div>
</div>
<div data-role="page" id="gallery" class="gallery-page">
<div data-theme="a" data-role="header"> <a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a>
<h1>Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div><a class="gallery-item" href="http://photoswipe.com/latest/examples/images/full/001.jpg" data-ajax="false"><img src="http://photoswipe.com/latest/examples/images/thumb/001.jpg" alt="Image 001" /></a>
</div>
<div><a class="gallery-item" href="http://photoswipe.com/latest/examples/images/full/002.jpg" rel="external"><img src="http://photoswipe.com/latest/examples/images/thumb/002.jpg" alt="Image...
CSS
.ui-content {
padding: 0 !important;
}
.ui-listview {
margin: 0 !important;
}
JavaScript
//shopslist = $('#list_result li a[href^="#addFav"]')
localStorage.setItem('favourites', '[0, 3]');
var favourites = JSON.parse(localStorage.getItem("favourites"));
console.log(favourites);
var favs = [0,3],
shop, shopId, shopList = $('#page_list'),
shops = [{
'id': 0,
'name': 'VW',
'address': 'Germany',
'rating': 3
}, {
'id': 1,
'name': 'Mini',
'address': 'Britain',
'rating': 4
}, {
'id': 2,
'name': 'Yugo',
'address': 'Yugoslavia',
'rating': 1
}, {
'id': 3,
'name': 'Ferrari',
'address': 'Italy',
'rating': 2
}];
$(document).ready(function () {
$('.image-link').magnificPopup({
type: 'image'
});
});
var faved;
var l = shops.length;
for (var i = 0; i < l; i++) {
var shoppy = shops[i];
if (favs.indexOf(i) > -1 ) {
// return (fav ourites.indexOf(i) != -1);
var faved = 1;
$('.addfav_btn').removeClass('ui-icon-gear');
$('.addfav_btn').addClass('ui-icon-heart');
console.log('fav match found!!!!' + i);
} else {
var faved = 0;
console.log('NOOO match found!!!!' + i);
}
//$('#list_results li a').setAttribute('data-id',i);
$('#list_results').append('<li><a href="#shop" data-id="' + shops[i].id + '"><h2>'+ shops[i].name + '</h2><address>'+ shops[i].address + '</address></a><a class="addfav_btn" href="#addfav" data-rel="popup" data-position-to="window" data-transition="pop">Add to Favourite</a></li>');
}
// $('#list_results .faved:eq(1)').removeClass('ui-icon-star');
// $('#list_results .faved:eq(1)').addClass('ui-icon-heart');
$('#shops').on('pageinit', function() {
//if favs array
//$('#list_results...