如何使用if语句来过滤来自json的数据

时间:2014-10-03 11:02:32

标签: jquery html ajax json

我得到了json格式的预期结果。我希望在点击id"#imp"时更改图标。关于db中的status字段。数据库中的值正在更新,因为我点击但图标不会更改。我在使用类语句在类中根据来自json的状态在类之间切换时遇到问题。我尝试了这段代码,但它并没有为我工作。任何其他好的解决方案对我来说都很棒。谢谢。

$("#imp").live('click',function(){
    $this = $(this);
    var ids = $(this).prev().prev().prev().prev().attr("class");
    var impt = $(this).prev().attr("class");
    var alllist = "";
    $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/cms/mark_imp'; ?>",
        dataType: "json",
        data: {
            'id' : ids,
            'imp' : impt
        },

        beforeSend: function()
        {

        },
        success: function(data)
        {
            var list_len = data.length;

            for(var i=0;i<list_len;i++)
            {
                var imp_status = data[i].important;
                alllist += '<li class="list-group-item"><span>' +
                data[i].list + '</span><span class="pull-right"><span class="'+ data[i].id +'"></span>' +
                '<i class="icon-pencil" style="color:#f8a326"></i>&nbsp;&nbsp;&nbsp;' +
                '<i class="icon-remove" style="color:#f34541;cursor:pointer" id="del_list" title="Delete"></i>&nbsp;&nbsp;&nbsp;' +
                '<span class="'+ data[i].important +'"></span><i class="" style="color:#00acec;cursor:pointer" title="Mark as important" id="imp"></i></span></li>';


                if(imp_status === "0")
                {
                    $this.addClass("icon-bookmark-empty");
                }
                if(imp_status === "1")
                {
                    $this.addClass("icon-bookmark");
                }

            //here i want to add different class for different imp_status. Like given i want to add class icon-bookmark-empty when imp_status is 0 and when it is 1 i want to add icon-bookmark.

            }
            $("#inlist").html(alllist);
        }
    });
});

2 个答案:

答案 0 :(得分:0)

如果使用jQuery构造函数,可以在它们上使用jQuery的.addClass()等。只是一个快速的代码示例:

     success: function(data) {

         var list_len = data.length,
             inlist = $("#inlist");
             inlist.empty();

         for(var i=0;i<list_len;i++) {
             var imp_status = data[i].important,
                 item = $('<li></li>');

             // Append spans, i's and other things you need
             item.append('<span>Content</span');

             if(imp_status == 'active') {
                 item.addClass('active');
             } else {
                 item.addClass('somethingelse');
             }

             inlist.append(item);

         }
     }

答案 1 :(得分:0)

如果我理解正确,你可以试试这个。在for循环中,只需添加以下if语句:

if(i == 0) {
  $('.your-class-here').addClass('icon-bookmark-empty');
} else if (i == 1) {
  $('.your-class-here').addClass('icon-bookmark');
}

所以,你的for循环将如下所示:

$("#imp").live('click',function(){
  $this = $(this);
  var ids = $(this).prev().prev().prev().prev().attr("class");
  var impt = $(this).prev().attr("class");
  var alllist = "";
  $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/cms/mark_imp'; ?>",
         dataType: "json",
        data: {
            'id' : ids,
            'imp' : impt
        },

        beforeSend: function()
        {

        },
        success: function(data)
        {
         var list_len = data.length;

         for(var i=0;i<list_len;i++)
         {
             var imp_status = data[i].important;   
             alllist += '<li class="list-group-item"><span>' +
                        data[i].list + '</span><span class="pull-right"><span class="'+ data[i].id +'"></span>' +
                     '<i class="icon-pencil" style="color:#f8a326"></i>&nbsp;&nbsp;&nbsp;' +
                        '<i class="icon-remove" style="color:#f34541;cursor:pointer" id="del_list" title="Delete"></i>&nbsp;&nbsp;&nbsp;' +
                        '<span class="'+ data[i].important +'"></span><i class="'+ if(imp_status === "0"){"icon-bookmark-empty"} if(imp_status === "1"){"icon-bookmark"} +'" style="color:#00acec;cursor:pointer" title="Mark as important" id="imp"></i></span></li>';

           //here i want to add different class for different imp_status. Like given i want to add class icon-bookmark-empty when imp_status is 0 and when it is 1 i want to add icon-bookmark.
           if(i == 0) {
             $('.your-class-here').addClass('icon-bookmark-empty');
           } else if (i == 1) {
             $('.your-class-here').addClass('icon-bookmark');
           }

         }
         $("#inlist").html(alllist);
        }
    });

});

这样,当你的循环开始计数时,如果i为0,它将为所需元素添加类,或者如果i为1,它将为所需元素添加一些不同的类。