jQuery addClass example

Change class name on click in jQuery

by Simon Price

HTML

<button>
click me
</button>

<div>
<img id='one' src="">

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$('button').click(function(){
getPostData();
})

function getPostData(){

$.ajax({
        url: "https://api.sportilyapp.com/posts/282",
        headers: {"Authorization": "Bearer ZWJQYulPLtD3urFYau5Jyud9d1Bos5j2SkOwAkW0"}
    })           
    .done(function (data) {
      
      var json = $.parseJSON(data.content);
			$(json).each(function (i, val) {
  		$.each(val, function (k, v) {
        if(k == "image_id" && v !== null && v !== undefined){
    		console.log(k + " : " + v);
        getImage(v)
        }
  		});
}); 
      
      
    })
    .fail(function (jqXHR, textStatus) {
      alert("error: " + textStatus);
    });

}

function getImage(id){

$.ajax({
        url: "https://api.sportilyapp.com/images/" + id,
        headers: {"Authorization": "Bearer ZWJQYulPLtD3urFYau5Jyud9d1Bos5j2SkOwAkW0"}
    })           
    .done(function (data) {
      console.log(data.file.uri);
      
      $("#one").attr("src",data.file.uri);
    })
    .fail(function (jqXHR, textStatus) {
      alert("error: " + textStatus);
    });

}