Changing class type using Jquery

Question

I am using this code to fetch the data from startup.php.The response of the PHP file is JSON with 3 fields. One of the field in JSON response is a status message. How to change the value of div class .content based on the status message. I need to do that to change the color of the text displayed in the content DIV based on the status message. .content is the class name of the DIV

var loadinggif = '../img/loading.gif';
$(document).ready(function(){  
    // set up the click event
        $('body').on('click','.btnbg', function() {
                var toLoad = '../vr/startup.php';
                $('.content').empty();
                $('.content').slideUp('slow', loadContent);
                $('#load').remove();
                $('#waiting').append('<div id="load"><img src="' + loadinggif + '" alt="Loading" /></div>');
                $('#load').fadeIn('normal');
                function loadContent() {

                    var userName = $('#userName').val();                    
                    var remote_addr = $('#remote_addr').val(); 
                    var forwarded_for = $('#forwarded_for').val();
                    var url = $('#url').val();
                    //$('#forwarded_for1').val()'';
  var _post = {'userName': userName, 'ipAddr1':remote_addr,'ipAddr2':forwarded_for, 'url':url};

   $('.content').load(toLoad, _post , function(response, status, xhr) 


if (status == 'error') {
                        var msg = "Sorry but there was an error: ";
                        $(".content").html(msg + xhr.status + " " + xhr.statusText);
                    }            
            }).slideDown('slow', hideLoader());
                }
                function hideLoader() {
                        $('#load').fadeOut('normal');
                }
                return false;
        });

Use `.addClass()` and `.removeClass()` to change an elements class. — Jay Blanchard, Mar 29 '17 at 12:54
Possible duplicate of [jquery change class name](http://stackoverflow.com/questions/3452778/jquery-change-class-name) — The4thIceman, Mar 29 '17 at 13:00

Nicolas · Answer 1 · 2017-03-29T13:07:31.533

1

You can use the css() function in Jquery :

$(".content").css({'background-color': 'red'});

Edit

I red your question wrong. To change class you can use $('.content').removeClass('classOne').addClass('classTwo');
If you have a class like has-error, you can use toggleClass() to toggle it, it will remove it if it's present or add it if not :
$('.content').toggleClass('has-error');

for your if elseprobleme, simply do :

if(condition) {
   $('.content').removeClass('class2 class3').addClass('class1');
} else if(condition2) {
   $('.content').removeClass('class1 class3').addClass('class2');
} else {
   $('.content').removeClass('class1 class2').addClass('class3');
}

edited Mar 29 '17 at 13:07

answered Mar 29 '17 at 12:54

Nicolas

8,077
4
21
51

Based on the response how do i add a if condition ? – gurudev265 Mar 29 '17 at 13:01
Depending on how many condition you have, you could use a `? : ;` operator , or you could simply use a `if else` and set the correct class in the correct condition – Nicolas Mar 29 '17 at 13:04
How to parse a Json ? – gurudev265 Mar 29 '17 at 13:10
@gurudev265 http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript – The4thIceman Mar 29 '17 at 13:18
@gurudev265 you can use `JSON.parse()`, it will become an object or an array depending on your JSON. – Nicolas Mar 29 '17 at 13:54

Rafael Umbelino · Answer 2 · 2017-03-29T13:25:33.557

1

Use removeClass() and addClass().

Here is an example:

$('.content').removeClass("styleOne").addClass("styleTwo");

Edit

if(response == "Worked Fine"){ 
    $('.content').removeClass("default").addClass("styleGreen");
}else{
     $('.content').removeClass("default").addClass("styleRed");
}

edited Mar 29 '17 at 13:25

answered Mar 29 '17 at 12:56

Rafael Umbelino

771
7
14

How do i add a IF condition ? Based on response – gurudev265 Mar 29 '17 at 13:06
If it's true = Green or else Red – gurudev265 Mar 29 '17 at 13:06

Changing class type using Jquery

2 Answers2

Edit