jQuery addClass example

Change class name on click in jQuery

by Simon Price

HTML

<div>
<img id="bishaImg" src="https://s3-eu-west-1.amazonaws.com/sportily/1/documents/6."/>
</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

$(document).ready(function(){

getPostData(284, "bishaImg");


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

}

function getImage(id, imgId){

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

}

})