jQuery addClass example

Change class name on click in jQuery

by ZEZEME

HTML

<div class=PgTwo></div>

CSS

body {
  margin: 0;
  text-align: center;
  width: 100%;
  font-family: Helvetica;
}
.PgTwo {
	height: 100%;
  margin-top: 50px;
}/*
.PgTwo div {
  display: inline-block;
}
#imgWrapperDiv div {
  display: inline-block;
}*/
#imgDiv {
  position: relative;
  text-align: center;
  min-width: 200px;
  min-height: 200px;
  width: 25%;
  margin: 50px 4.1%;
  float: left;
}
#imgDiv:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
#imgDiv:hover {
  transform: scale(1.25);
  transition: 0.3s;
}
#images {
  height: 100%; 
}
#images img {
  width: 100%;
}
#title {
  position: absolute;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  padding: 0 10%;
  font-size: 2vw;
  width: 80%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  color: white;
}
#link {
  position: absolute;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  padding: 0 10%;
  font-size: 2vw;
  width: 80%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  color: white;
  z-index: 7;
}

JavaScript

var articlesURL = 'https://developer.nps.gov/api/v1/articles?parkCode=shen&api_key=pPWYtEYMTN7Q9hiBJPETmtHdtyq4PqnpWjY63bNU';

$.getJSON(articlesURL, function(data) {
	arr = data.data;

	for (var i = 0; i < arr.length; i++) {
  		var articleInfo = arr[i];
  		console.log(articleInfo);

  		var imgURL = articleInfo["listingimage"]['url'];
		var title = articleInfo["title"];
		var desc = articleInfo["listingdescription"];
		var url = articleInfo["url"];

		if (imgURL != "") {

	  		var imgWrapperDiv = document.createElement('div');
	  		var imgDiv = document.createElement('div');
	  		var descDiv = document.createElement('div');
	  		
	  		imgDiv.id = 'imgDiv';
	  		imgWrapperDiv.id = 'imgWrapperDiv';
	  		descDiv.id = 'descDiv';

	  		descDiv.textContent = desc;
	  		var imgurlCSS = 'url("'+imgURL+'")';
	  		$(imgDiv).css({'background-image': imgurlCSS, 'background-repeat': 'no-repeat', 'background-size': 'cover'});

	  		$(imgDiv).append($('<a href="' + url + '" id=link >'+ title +'</a>').css('text-decoration', 'none'));

			$('#imgWrapperDiv').append(imgDiv);
			$('#imgWrapperDiv').append(descDiv);
	  		$('.PgTwo').append(imgWrapperDiv);
     }
     }
 });