jQuery addClass example

Change class name on click in jQuery

by Hifni Nazeer

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</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() {
  alert("hello");

  // find elements
  var banner = $("#banner-message")
  var button = $("button")

  // handle click and add class
  button.on("click", function() {
    //banner.addClass("alt")
    alert("Hello again");

    var feed = "https://www.cbsl.gov.lk/en/press/press-releases/mprrss";

    $.ajax(feed, {
      accepts: {
        xml: "application/rss+xml"
      },
      dataType: "xml",
      success: function(data) {
        //Credit: http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript

        alert("Here");

        $(data).find("item").each(function() { // or "item" or whatever suits your feed
          var el = $(this);
          console.log(el);

          console.log("------------------------");
          console.log("title      : " + el.find("title").text());
          console.log("link       : " + el.find("link").text());
          console.log("description: " + el.find("source").text());
        });
      }
    });

  });


});