What is the process of attaching a CSS class to jQuery variables?

Welcome everyone! I am relatively new to CSS and jQuery. In my project, I'm using different CSS classes based on certain conditions within a loop.

if(get_node_details[i]['node_status'] == "ONLINE")
{
    var panel_color = ".panel panel-primary";

    if(get_node_details[i]['node_type'] == "SECONDARY")
    {
        var panel_color = ".panel panel-info";
    }
    else if(get_node_details[i]['node_type'] == "STAND_ALONE")
    {
        var panel_color = ".panel panel-success";
}

I am assigning CSS classes to JavaScript variables and generating dynamic HTML content on the same page.

var text = "";
text = text + 
'<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">\
<div id="panel_id_'+node_index+'" class='+panel_color+'>\
</div>

However, I'm facing an issue where the class is not being applied to the panel depending on the condition. I would appreciate any help or advice on this matter!

jqueryhtmlcss

Answer №1

To store the class name in a variable, you can use the following syntax:

var className = "active";
$("#divId").addClass(className);

You can view an example on this Fiddle link

Answer №2

      I have made some modifications to your code, please review:   
           if(get_node_details[i]['node_status'] == "ONLINE")
                    {
                        let panel_theme = ".panel panel-primary";

                        if(get_node_details[i]['node_type'] == "SECONDARY")
                        {
                            panel_theme = ".panel panel-info";
                        }
                        else if(get_node_details[i]['node_type'] == "STAND_ALONE")
                        {
                            panel_theme = ".panel panel-success";
                        }
                       $("#divId").addClass(panel_theme);
                    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JavaScript to trigger an alert message upon selecting various options and blocking the onclick event

Setting up a simpleCart(js) with selectable options presents a challenge. The task at hand is to display an alert if not all drop-downs meet specific requirements and to prevent the "Add to cart" button from adding items to the cart when these conditions a ...

javascripthtmlalerthtml-select

Scrapy spider malfunctioning when trying to crawl the homepage

I'm currently using a scrapy scrawler I wrote to collect data from from scrapy.contrib.spiders import CrawlSpider, Rule from scrapy.contrib.linkextractors.sgml import SgmlLinkExtractor from scrapy.selector import Selector from .. import items clas ...

pythonhtmlweb-scrapingweb-crawlerscrapy

Identify when an ajax request is completed in order to trigger a subsequent ajax request

Within my project, I am faced with a challenge involving select option groups that dynamically load ajax data based on previous selections. The issue arises when I attempt to replicate this functionality for another select option group. Here is the scenar ...

javascriptphpjqueryajaxfunction

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

javascriptjqueryhtmlcssradio-button

Performing an AJAX call in Rails 4 to update a particular value

I have a voting button on my website that displays the number of votes and adds an extra vote when clicked. I want to implement Ajax so that the page doesn't need to refresh every time a user votes. However, I am new to using Ajax with Rails and not s ...

javascriptjqueryruby-on-railsajax

An Easy Breakdown of How AJAX Works

I have a question that I believe someone with knowledge of AJAX should be able to answer easily. However, despite searching online, I haven't found an explanation that fits what I am looking for. I'm currently working on a site without any prior ...

jqueryajax

Assigning websockets to a global variable may cause them to malfunction

I'm utilizing websockets in conjunction with JavaScript and HTML5. Here is the code snippet I am currently working with: <input type="text" onFocus="so = new Websocket('ws://localhost:1234');" onBlur="so.close();" onKeyUp="keyup();"> ...

javascripthtmlnode.jswebsocket

Custom Native Scrollbar

Currently, there are jQuery plugins available that can transform a system's default scroll bar to resemble the iOS scroll bar. Examples of such plugins include . However, the example code for these plugins typically requires a fixed height in order to ...

javascriptjqueryhtmlcssslimscroll

When I access the website through the LinkedIn app, my CSS styles are getting jumbled up

Is there a way to resolve the problem I'm facing with CSS when accessing the site through the LinkedIn app on iPhone? The issues don't occur on Android. If anyone has a solution, please share. Thank you :) Click Here ...

htmlcssreactjsnext.js

Tips for replicating input boxes in a while loop

https://i.sstatic.net/iuNIl.png HTML : <table> <tr> <td> <input type="text" name="name[]" value=" echo $ail"> <label >Address</label> <input type="text" name="coun ...

javascriptphpjqueryhtml

Utilizing JSON format, handling special characters, and storing data in a database

My friend approached me with a question and although I wanted to offer immediate help, I realized that seeking advice from others may provide better solutions. Situation: Imagine there is a Form that includes a RichText feature: DHTMLX RichText (). This R ...

javascripthtmljsonajax

Making Adjustments to the Padding of Main Content Column in Typo3 Using Bootstrap Package

As the administrator of our local sports club's homepage, I oversee svwalddorf.de, powered by typo3 10.4.22 with bootstrap package 11.0.3. The current bootstrap template creates excessive empty space around the centered content area as shown here. Th ...

cssbootstrap-4typo3padding

What steps can be taken to ensure that a dropdown menu responds instantly to the JavaScript code provided?

Upon discovering this code snippet in a different answer (on jsfiddle), I noticed that it allows for the appearance of a text box when the user selects 'other' from the dropdown menu. However, when I include '<option value='0' s ...

javascripthtml

prepend an element before the li element

I am currently working with Angular Material and I am trying to add the md-fab-speed-dial in front of an li element. However, when I attempt to do this, the md-fab-speed-dial appears below the li element, as shown in this image: https://i.sstatic.net/Rqz ...

cssangularjsangular-material

Absence of radio button click display

How can I determine if a radio button has been selected? $(document).ready(function() { $("#rad").click(function() { var radio = $("#rad input:checked"); if(radio == 0) { ...

jquery

Looking to display user data within a specific div using JavaScript? Check out my code!

Issue Solved by Me I resolved the problem by using ko.js to check data binding in java! Thanks to everyone who helped. I have implemented this code to display online users in my chat application (x7chat 3, available for free download) The code can be fou ...

javascriptjquery

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

How is it possible for the javascript condition to be executed even when it is false?

Despite the condition being false, the javascript flow enters the if condition. Check out the code snippet below: <script> $(document).ready(function() { var checkCon = "teststr2"; console.log("checkCon: "+checkCon); if(checkCon == " ...

javascriptjqueryajax

Issues with centering background-position while using clip-path functionality

Struggling to center a background image? I initially suspected conflicting CSS rules, so I created a simplified demo to troubleshoot. After reviewing examples on SO and beyond, it seems like my approach is correct. Can anyone help identify what I might be ...

htmlcss

I seem to be having trouble locating the element using its xpath

I am in search of the xpath element below. What would be the xpath? precise location (GPS and network-based) Below is the HTML code: <div class="permission-bucket" jsinstance="1" jstcache="75"> <div class="bucket-icon-and-title" jstcache="87"&g ...

htmlxpath