icon change onclick of menu element jquery

Question

I am trying to replace the calendar icon which is on right side of header,based on item we selected from the menu elements.

$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
});
});

Please check full code here

Answer 1

You can write it like this:

$(document).ready(function() {
 $('ul.s-thumbs li').on('click', function() {
    var text = $(this).attr('class');
    var icon = $(this).find('i').attr('class');
    var newClass = icon + ' pull-right';
   $("#title").text(text);
   $('#chicon i').removeClass();
   $('#chicon i').addClass(newClass);
  });
});

Answer 2

I have done minor change script as below:

$(document).ready(function() {

  $('ul.s-thumbs li').on('click', function() {
    var getClass = $(this).attr('class');
    $("#title").text(getClass);

    var icon_class=$(this).find('i').attr('class');
    $("#chicon").find('i').attr('class',icon_class+' pull-right');
  });
});

Answer 3

You can do it like this

    $(document).ready(function() {

  $('ul.s-thumbs li').on('click', function() {
    var getClass = $(this).attr('class');
    $("#title").text(getClass);
    classI= $(this).find("i").attr('class');
    $("#chicon i").attr("class",classI+" pull-right");
  });
});

Here is working example http://codepen.io/anon/pen/ALWRww

Answer 4

This will change your icon and text

$(document).ready(function() {
   var oldicon = "fa fa-calendar-check-o";
   $('ul.s-thumbs li').on('click', function() {
      var getClass = $(this).attr('class');
      $("#title").text(getClass);
      var newicon = $(this).find("i").attr("class");
      $("#chicon i").removeClass(oldicon).addClass(newicon);
      oldicon = newicon;
  });
});