Problem with jQuery addclass and Removeclass

Asked

Viewed 345 times

0

I’m having trouble using the addClass and Remove Class in jQuery. I need the Section of class="" by clicking on it, it disappears and appears to class="video". I need the class "video" to occupy the same space as the class"Lala". ps:(the class "video" cannot appear in html until clicked) Jsfiddle: https://jsfiddle.net/0fdmunoy/1/ THANK YOU <3

$(function() {
  $('.bolinha-dentro').click(function(){
    $('.bolinha-dentro').removeClass('.bolinha-dentro');
    $(this).addClass('for');     
  });
});
.video.for {
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="lala">

   <div class="media3" style="width:57%;display: inline-block;vertical-align: top;padding-left: 60px;padding-top:50px;">
       <h2 style="font-size: 16px; color: red; font-weight: bold;padding-bottom:20px;">title for the things we shuld do</h2>

       <p style="color: rgb(112, 111, 111); font-size: 16px; font-weight: bold;padding-bottom: 20px;">&quot;Pusing Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'<strong style="font-size:17px;font-weight: bold;"> &quotwe serve to wudwhq&quot;.&quot;</strong>&nbsp;</p>

       <h3 class="media4" style="color:#FF0000;font-size:12px;">-GRAG THE PRESIDENT OF THE USA</h3>
   </div>

</section>

<div class="video">
   <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>

javascript html jquery css

  • Tried to use jquery click? $('.lala').on('click', function () { this.fadeOut() })

  • Who is bolinha-dentro?

  • Matheus, I don’t understand what the example code has to do with your problem. I didn’t find the element .bolinha-dentro. And could you explain why you want to exchange classes at the same time? There may be another approach to your problem.

  • I understand what you want to do, but in the example you used different class names than you need, try to improve your example for the next questions, so it’s easier for the staff to help you.

3 answers

0

I looked for the simplest and easiest way to make to change the class from one to the other.

I developed a code with what you said you need and put in the jsFiddle

Or test the example below that is also working

$(function() {
  $('.lala').click(function(){
    $(this).removeClass('.lala')
    .addClass('video');
    
    $(".video div button").css('border', '1px solid blue').html("Mudou para a classe <strong>VIDEO</strong>");
    
  });
});
.video {
  border: 1px solid red;
  background-color: #CCFF00;
}

.video img{
  width:95px;
  height:80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<br><br>

<section class="lala">

  <div>
    <button>
    Aqui tem a classe <strong>LALA</strong>
    </button>
  </div>

</section>

<br><br>

<div class="video">
  <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>

0

You could do so in the event click:

$('.lala').addClass('video').removeClass('lala');

0

I don’t know if it could be the best option, but since you want the class to disappear and not be hidden, try to store them in a variable so you can work with both.

  • Keep var lalaHtml = $('.Lala'). html() var videoHtml = $('.video'). html()

  • Add $('.Lala'). html(lalaHtml) $('. Lala'). html(videoHtml)

There are other better ways to do this.

var lalaHtml = $('.lala').html();
var videoHtml = $('.video').html();

$(function() {
  $(document).on('click', '.lala', function () { 
   $('.lala').html('');
   $('.video').html(videoHtml);
   console.log('lala')
  });
});

$(function() {
  $(document).on('click', '.video', function () { 
   $('.video').html('');
   $('.lala').html(lalaHtml);
   console.log('video')
  });
});
.media3{
  width:57%;
  display: inline-block;
  vertical-align: top;
  padding-left: 60px;
  padding-top:50px;
}
.media3 h2{
  font-size: 16px; 
  color: red; 
  font-weight: bold;
  padding-bottom:20px;
}
.media3 p{
  color: rgb(112, 111, 111); 
  font-size: 16px; 
  font-weight: bold;
  padding-bottom: 20px;
}
.media3 strong{
  font-size:17px;
  font-weight: bold;
}
.media4{
  color:#FF0000;
  font-size:12px;
}

.video.for {
  display:block;
}
   
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<section class="lala">
  <div class="media3">
    <h2>title for the things we shuld do</h2>
    <p>
      &quot;Pusing Lorem Ipsum is that it has a more-or-less normal distribution            of letters, as opposed to using 'Content here, content here'
      <strong style=""> &quotwe serve to wudwhq&quot;.&quot;</strong>
      &nbsp;
    </p>
    <h3 class="media4" >-GRAG THE PRESIDENT OF THE USA</h3>
  </div>
</section>
<div class="video">
    <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>

So just hide the first div that you don’t want to appear first

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.