Add an extra class to a tag with JavaScript - Jquery

developer
February 13, 2023
137 views
1 vote
2 Answers

I plan to display the title whenever the user clicks on the icon, and by clicking again, in addition to hiding the title, the background color will also change so that the user knows which box he has clicked on before.

For this purpose, I wrote a script code that shows and hides the title well, but the background color does not change.

In summary:
I want the .background class to be added to the .box_mini class when the title is hidden.

I used to use this code to add a new class to the previous class:

$(document).ready(function () {
    $('.box_mini').click(function () {
        $(this).toggleClass('background');
    });
});

But I don’t know what to do here?

My codes are as follows:

let mini = document.querySelector(".box_mini");

document.querySelectorAll('.box_icon').forEach(eye => {
    eye.addEventListener("click", function() {
    let excerpt = this.parentNode.querySelector(".title_box");
    if (this.classList.contains("bi-play-circle-fill")) {
        this.classList = "bi bi-power box_icon";
        excerpt.style.display = "block";
    } else {
        this.classList = "bi bi-play-circle-fill box_icon";
        excerpt.style.display = "none"
        
         $(mini).ready(function () {
                $(this).toggleClass('background');
            });
      }
  });
});

 .box_main {
        display: flex;
        justify-content: space-around;
    }

    .box_mini {
        width: 250px;
        height: 200px;
        background: #5ec7ff;
        box-shadow: 0 0 4px #000;
        transition: all 0.5s ease;
    }

    .box_icon {
        font-size: 25px;
        margin: 10px 45% 6px;
        color: #7f7f7f;
    }

    .title_box {
        font-size: 45px;
        margin: 25px 0;
        color: #f9ff4d;
        text-align: center;
        display: none;
    }

    .background{
        background: #c9e955;
        transition: all 0.5s ease;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<section class="box_main">
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

</section>

Tags: javascript jquery

Answers

I think you are mixing up jQuery with native js too much.

Why not just stick to jQuery like this?

Edit, I would set cursor:pointer; to your .bi class, to highlight clickable context.

$('body').on('click','.bi-play-circle-fill',function(){
  $(this).next('.title_box').show();
  $(this).removeClass('bi-play-circle-fill').addClass('bi-power');
  $(this).parent().addClass('background');
});

$('body').on('click','.bi-power',function(){
  $(this).next('.title_box').hide();
  $(this).removeClass('bi-power').addClass('bi-play-circle-fill');
  $(this).parent().removeClass('background');
});

.box_main {
        display: flex;
        justify-content: space-around;
    }

    .box_mini {
        width: 250px;
        height: 200px;
        background: #5ec7ff;
        box-shadow: 0 0 4px #000;
        transition: all 0.5s ease;
    }

    .box_icon {
        font-size: 25px;
        margin: 10px 45% 6px;
        color: #7f7f7f;
    }

    .title_box {
        font-size: 45px;
        margin: 25px 0;
        color: #f9ff4d;
        text-align: center;
        display: none;
    }

    .background{
        background: #c9e955;
        transition: all 0.5s ease;
    }
    
    .bi{
      cursor: pointer;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<section class="box_main">
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

</section>

I tried to keep this very similar to what you had previously. Looks like you weren’t getting the parent .box_mini class to change the background colour.

let mini = document.querySelector(".box_mini");


document.querySelectorAll('.box_icon').forEach(eye => {
eye.addEventListener("click", function() {
let excerpt = this.parentNode.querySelector(".title_box");
let parent = $(this).parent();
if (this.classList.contains("bi-play-circle-fill")) {
    this.classList = "bi bi-power box_icon";
    excerpt.style.display = "block";
    parent.toggleClass('background');
} else {
    this.classList = "bi bi-play-circle-fill box_icon";
    excerpt.style.display = "none"
    parent.toggleClass('background');
  }

  });
});

Please signup or login to give your own answer.

Click here to cancel reply.

Add an extra class to a tag with JavaScript – Jquery

Answers