Изменение значка onclick элемента меню jquery

Question

Я пытаюсь заменить значок календаря, который находится на правой стороне заголовка, на основе элемента, выбранного из элементов меню.

$(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

Вы можете сделать это, как этот

$(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"); 
    }); 
}); 

Здесь работает пример http://codepen.io/anon/pen/ALWRww

Answer 2

Это изменит вашу иконку и текст

$(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; 
    }); 
}); 

Answer 3

Я сделал незначительные изменения сценария, как показано ниже:

$(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 4

Вы можете написать это:

$(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); 
    }); 
});