CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James Douglas
James Douglas

Reputation: 3446

JQuery .addClass() not applying styles defined in JQuery

It's quite a simple question, but I'm (trying) to write a JQuery plugin, and I want to use only JQuery. The problem is, I have some styles set for the .active divs (via JQuery), and on clicking a <div> it's given a class active - I know this, because I checked in the developer tools - but it's not given the styles. I tried hardcoding the class onto the <div>, and it worked fine. I also tried hardcoding the styles in CSS instead of JQuery, and again, it worked. Is there a way of updating the JQuery - onclick of the <div> - so that the styles are applied when the <div> is clicked?

$('div.active').css({
  'border-style':'solid',
	'border-width':'1px',
	'border-color':'black',
});
$('div').on('click',function(){
   $('div').removeClass('active');
    $(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>

JSFiddle

Also, can you explain why this isn't working for me?

Thanks

Upvotes: 1

Views: 3740

Answers (3)

Tianyun Ling
Tianyun Ling

Reputation: 1097

Aside explanation from others, put CSS seperately would work,

div.active {
    border: 1px solid red;
}

div {
    border: 1px solid green;
}

A working demo for your question is here: js fiddle

Upvotes: 0

ssc-hrep3
ssc-hrep3

Reputation: 16079

$('div.active') selects all <div> elements which have the class .active on them, in the exact time of its execution. This means, when the page is loaded, but there are no elements having the class .active on them when the page is loaded, so no element will be styled. The properties are not automatically added afterwards, when there is an element matching the previous selection.

If you want to add styles to your page, you need to add a <style> attribute to the DOM. You can do it like this:

$('head').append('<style>div.active { border: 1px solid black; }</style>');

I would, however, not add stylesheets programmatically. Try to add the styles to your stylesheet file and only switch classes to make changes programmatically.

Here is working example:

$('head').append('<style>div.active { border: 1px solid black; }</style>');
$('div').on('click',function(){
   $('div').removeClass('active');
    $(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>

Upvotes: 1

Taplar
Taplar

Reputation: 24965

$('div.active').css({
  'border-style':'solid',
    'border-width':'1px',
    'border-color':'black',
});

The above logic puts inline styles on any div element that has the active class, -at that point in time-, in the DOM.

$('div').on('click',function(){
    $('div').removeClass('active');
    $(this).addClass('active');
});

The above logic simply shifts around the active class on elements. It does not automatically move inline styles.

Upvotes: 3

Related Questions