Изменение шрифта-удивительный значок при нажатии без перезагрузки страницы

Question

Я внедрил шрифт в моем проекте. Все работает нормально.

Так что я написал несколько jqyuery, чтобы изменить шрифт-устрашающий значок щелкнули на другую иконку (пустой квадрат -> проверил квадрат), используя этот код:

function checkTask(){ 
    // Dit loopke zodanig dat we dit doen voor alle taken 
    $(".status").on('click' , function(a){ 
     a.preventDefault(); 
     var klikedItem = $(this).parent().attr('id'); 
     var Deid = klikedItem.slice(5, 6); 
     console.log("idnvanelement" + Deid); 
     if($(this).hasClass('fa-square-o')){ 
      localStorage.setItem("Status-" + Deid, 'klaar'); 
     } else { 
      localStorage.setItem("Status-" + Deid, 'nietklaar'); 
     } 
    }); 

    var lengthNumber = localStorage.getItem('TaskNumber'); 
    for(i=1; i <= lengthNumber; i++) { 
    if (localStorage.getItem("Status-" + i) == 'klaar'){ 
     $("#task-" + i + "> a.status").removeClass('fa-square-o').addClass('fa-check-square-o'); 
    } 
    } 
} 
checkTask(); 

Так что этот код делает, это, если элемент щелкнут, измените класс-класс. Но, логотип не меняется тогда. Поэтому мне нужно перезагрузить страницу. Но я не хочу этого.

Как я могу поменять шрифт-удивительный логотип без перезагрузки страницы? Я попытался использовать ajax, но не преуспел. JSfiddle, если вам нравятся!

Answer 1

Ответа таков:

function checkTask(){ 
    // Dit loopke zodanig dat we dit doen voor alle taken 
    $(".status").on('click' , function(a){ 
     a.preventDefault(); 
     var klikedItem = $(this).parent().attr('id'); 
     var Deid = klikedItem.slice(5, 6); 
     console.log("IDvanelement" + Deid); 
     if($(this).hasClass('fa-square-o')){ 
      localStorage.setItem("Status-" + Deid, 'klaar'); 
      $("#task-" + Deid + "> a.status").removeClass('fa-square-o').addClass('fa-check-square-o'); 
     } else { 
      localStorage.setItem("Status-" + Deid, 'nietklaar'); 
      $("#task-" + Deid + "> a.status").removeClass('fa-check-square-o').addClass('fa-square-o'); 
     } 
    }); 

    var lengthNumber = localStorage.getItem('TaskNumber'); 
    for(i=1; i <= lengthNumber; i++) { 
    if (localStorage.getItem("Status-" + i) == 'klaar'){ 
     $("#task-" + i + "> a.status").removeClass('fa-square-o').addClass('fa-check-square-o'); 
    } 
    } 
} 
checkTask();