Question

我在我的项目中实现了字体真棒。一切正常。

所以我写了一些jqyuery，用以下代码将点击的字体 - 真棒图标更改为另一个图标（空方块 - ＆gt;格子方块）：

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

这个代码的作用是，如果单击该元素，则更改font-awesome类。但是，徽标并没有改变。因此，我必须重新加载页面。但我不希望这样。

如何在不重新加载页面的情况下更改字体真棒徽标？我曾尝试使用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();

单击更改字体真棒图标而不重新加载页面

1 个答案: