Как использовать оператор if для фильтрации данных, полученных от json

Question

Я получаю ожидаемый результат в формате json. Я хочу, чтобы значок был изменен, когда я нажимаю на id «#imp» относительно поля состояния в db. Значение в базе данных обновляется, когда я нажимаю, но значок не изменяется. Я получаю проблему при использовании инструкции if внутри класса для переключения между классами в соответствии со статусом, исходящим от 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); 
     } 
    }); 
}); 

Answer 1

Если вы используете конструктор JQuery, вы можете использовать .addClass JQuery (в) и т.д. на них. Просто быстрый пример кода:

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

     } 
    } 

Answer 2

Если я правильно вас понимаю, вы можете попробовать это. Внутри вашего цикл просто добавить это, если заявление:

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

Таким образом, ваш цикл будет выглядеть следующим образом:

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

}); 

Таким образом, когда ваш цикл начинает отсчет, если я это 0 он добавит класс к требуемому элементу, или если i равно 1, он добавит некоторый другой класс к требуемому элементу.