Pass vars through functions
Code by jeff_mcmahan of StackOverflow Suggestions by Roko C. Buljan http://stackoverflow.com/q/38130050/5076162
by dixalex
HTML
<div id='masterDatabase'>
</div>
CSS
div.hiddenDiv {
border: solid 1px #ACE;
background-color: #FFF;
text-align: center;
width: 290px;
}
div.hiddenDiv h3 {
font-size: .75em;
color: blue;
font-family: arial;
}
img {
width: 150px;
height: auto;
}
.store-img {
max-height: 85px;
overflow: hidden;
}
div.selected {
background-color: #ACE;
}
JavaScript
var users = [];
storeArray = '';
makeUser("Target", "http://images.clipartlogo.com/files/images/36/361352/ancient-city-under-full-moon_p.jpg", 550, "Bible + Strong's Concordance");
//Source:Ancient City Under Full Moon from clipartlogo.com (by Bazaardesigns)
makeUser("Wal-Mart", "http://images.clipartlogo.com/files/images/39/396186/abstract-city-illustration_p.jpg", 250, "Interlinear Bible + Predestination");
//Source:Abstract City Illustration from clipartlogo.com
function makeUser(storeName, storeImageUrl, pointsNeeded, prize) {
var user = [];
user.push(storeName);
user.push(storeImageUrl);
user.push(pointsNeeded);
user.push(prize);
users.push(user);
}
//Access the array to create dynamic records for HTML output
for (c = 0, y = users.length; c < y; c++) {
var storeName = users[c][0];
var storeImage = users[c][1];
var pointsNeeded = users[c][2];
var prize = users[c][3];
var storeString = '<div class="idstore-' + c + ' hiddenDiv" data-name="idstores" data-value="5">' +
'<div class="store-img" data-id="storeImg" data-value="5">' + '<img src="' + storeImage + '" />' + '</div>' +
'<div class="store-text2">' +
'<h3>' + pointsNeeded + ' Hero Points<br/>' + prize + ' at ' + storeName + '</h3>' + '</div></div>';
storeArray += storeString;
}
$('#masterDatabase').append(storeArray);
$('div.hiddenDiv').on("click", function() {
// Access the clicked element with evt.target or 'this' keyword
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
});