Trying to add class with jQuery

Question

Trying to add class to a section which increases font size of that section using jQuery addClass method but no working.

Here is the code..

html:

   <header>
    <ul>
         <li class="small"><a href="">Small</a></li>
         <li class="medium"><a href="">Medium</a></li>
         <li class="large"><a href="">Large</a></li>

    </ul>
 </header>

 <section id="data">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam 
     molestiae accusamus molestias reprehenderit autem harum tenetur! 
      Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio 
     possimus nostrum, ducimus assumenda corrupti.</p>


</section>

css:

    #data{font-size: 16px;}
    a{text-decoration: none;}
    ul li{display: inline-block;}
    .active{border-bottom: 1px solid red;}
    .small{font-size: 12px;}
    .medium{font-size:22px;}
    .large{font-size: 26px;}

jQuery:

   <script>
    $(function(){


        $("li.medium").click(function(){
               $("#data").addClass("medium");
         });

     });

</script>

I would like you to check my answer as well. Although many of them has put their view i would ask you to go through mine once. — Ankit Agarwal
– Ankit Agarwal, Commented Jun 28, 2017 at 11:47

dippas · Accepted Answer · 2017-06-28 11:40:30Z

two things you need to change:

you need to prevent the default behavior from a using e.preventDefault();
and then CSS specificity so use #data.medium

$("li.medium").click(function(e) {
  e.preventDefault();
  $("#data").addClass("medium");
});

#data {
  font-size: 16px;
}

a {
  text-decoration: none;
}

ul li {
  display: inline-block;
}

.active {
  border-bottom: 1px solid red;
}

#data.small, .small{
  font-size: 12px;
}

#data.medium, .medium {
  font-size: 22px;
}

#data.large, .large {
  font-size: 26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <ul>
    <li class="small"><a href="">Small</a></li>
    <li class="medium"><a href="">Medium</a></li>
    <li class="large"><a href="">Large</a></li>

  </ul>
</header>

<section id="data">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae accusamus molestias reprehenderit autem harum tenetur! Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio possimus nostrum, ducimus assumenda corrupti.</p>


</section>

C3roe · Accepted Answer · 2017-06-28 11:37:09Z

1

You have a simple CSS specificity problem here.

#data is a “stronger” selector than .medium.

One simple way to solve this, would be to increase the second selectors specificity, by including the id in it as well:

#data.medium { font-size:22px; }

But you should rather try and avoid using ids to select elements for styling purposes in the first place - because it easily leads to such problems in many cases.

answered Jun 28, 2017 at 11:37

C3roe

97.7k15 gold badges100 silver badges172 bronze badges

Comments

Jamiec · Accepted Answer · 2017-06-28 11:39:48Z

Your css treats the #data p directive as more important than you medium class. Comment out the former and your code works with little change (specifically - preventDefault to stop the a click navigating away)

 $("li.medium").click(function(e){
      e.preventDefault();
      $("#data").addClass("medium");
      return false;
 });

/*#data p{font-size: 16px;}*/
a{text-decoration: none;}
ul li{display: inline-block;}
.active{border-bottom: 1px solid red;}
.small{font-size: 12px;}
.medium{ font-size:22px !important ;}
.large{font-size: 26px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <ul>
         <li class="small"><a href="">Small</a></li>
         <li class="medium"><a href="">Medium</a></li>
         <li class="large"><a href="">Large</a></li>

    </ul>
 </header>

 <section id="data">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam 
     molestiae accusamus molestias reprehenderit autem harum tenetur! 
      Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio 
     possimus nostrum, ducimus assumenda corrupti.</p>


</section>

Carsten Løvbo Andersen · Accepted Answer · 2017-06-28 11:43:00Z

0

Set the font size of #data p to inherit, then it works.

#data p {
  font-size: inherit;
}

Reason why is that your #data with medium has 22px and the p inside has 16px, so the p will always be smaller, but if your set inherit on the p, then it works because then it takes the parent font-size

$(function() {
  $("li.medium").click(function() {
    $("#data").addClass("medium");
  });

});

#data p {
  font-size: inherit;
}

a {
  text-decoration: none;
}

ul li {
  display: inline-block;
}

.active {
  border-bottom: 1px solid red;
}

.small {
  font-size: 12px;
}

.medium {
  font-size: 22px;
}

.large {
  font-size: 26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <ul>
    <li class="small"><a href="#">Small</a></li>
    <li class="medium"><a href="#">Medium</a></li>
    <li class="large"><a href="#">Large</a></li>

  </ul>
</header>

<section id="data">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae accusamus molestias reprehenderit autem harum tenetur! Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio possimus nostrum, ducimus assumenda corrupti.</p>


</section>

edited Jun 28, 2017 at 11:43

answered Jun 28, 2017 at 11:36

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

1 Comment

Kashkain Over a year ago

Please, explain why.

Hema Nandagopal · Accepted Answer · 2017-06-28 11:56:58Z

<!DOCTYPE html>
<html>
<head>
<style>

    a{text-decoration: none;}
    ul li{display: inline-block;}
    .active{border-bottom: 1px solid red;}
    .small{font-size: 12px;}
    .medium{font-size:22px;}
    .large{font-size: 26px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){


        $(".medium").click(function(){
		
               $("#data").addClass("medium");
         });

     });

</script>
</head>
<header>
    <ul>
         <li class="small">Small</li>
         <li class="medium">Medium</li>
         <li class="large">Large</li>

    </ul>
 </header>

 <section id="data">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam 
     molestiae accusamus molestias reprehenderit autem harum tenetur! 
      Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio 
     possimus nostrum, ducimus assumenda corrupti.</p>


</section>

</html>

The code was not working because, 1)you have given the text inside < a > tag so the change is done on clicking just few secs.2) You have already specified the font size for data.If you need you can remove the font size for data or add class to the "p" instead of the section.This one works fine!!

Collectives™ on Stack Overflow

Trying to add class with jQuery

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related