Add class and remove

Asked

Viewed 72 times

0

Problem

I want to get him to add the attribute active in suite-internal-item and remove the ones you have, but it’s not working.

jQuery

$('.suite-internal-link').on('click',function(e){
    e.preventDefault()
    $('.suite-internal-item').each(function(e){
        $('.suite-internal-item').removeClass('active')
        $(this).addClass('active')
    })
})

HTML

<ul class="suite-internal-items">
       <li class="suite-internal-item active">
           <img src="assets/images/aloha1.jpg" alt="">
       </li>
        <li class="suite-internal-item">
            <img src="assets/images/aloha2.jpg" alt="">
        </li>
        <li class="suite-internal-item">
            <img src="assets/images/aloha3.jpg" alt="">
        </li>
</ul>
    <div class="suite-internal-links">
        <a href="" class="suite-internal-link">
            <img src="assets/images/aloha1.jpg" alt="">
        </a>
        <a href="" class="suite-internal-link">
            <img src="assets/images/aloha2.jpg" alt="">
        </a>
        <a href="" class="suite-internal-link">
            <img src="assets/images/aloha3.jpg" alt="">
        </a>
    </div>
jquery

  • What is your doubt?

  • I am wanting to make him adc the attribute 'active' in the class suite-Internal-item and remove the active ones that have, but it is not working

3 answers

3

You can use the $(this) and .siblings() to say that the clicked item should add the class ativo at the same time you remove the class of brothers.

Follow the example:

$(".suite-internal-item").click(function(event){
    event.preventDefault();
    $(this).addClass("active").siblings().removeClass("active");
});
.suite-internal-item.active {
    opacity: .5;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<ul class="suite-internal-items">
    <li class="suite-internal-item active">
        <img src="https://placecage.com/100/100">
    </li>
    <li class="suite-internal-item">
        <img src="https://placecage.com/100/100">
    </li>
    <li class="suite-internal-item">
        <img src="https://placecage.com/100/100">
    </li>
</ul>

  • Great!! you could show me how I would do by clicking on . suite-Internal-link and adc active on . suite-Internal-item, just like you did, just changing the target to . suite-Internal-link.

  • Ai gets a little complicated, because as you will define in which of the 3 . suite-Internal-item you want to add the class? You have to explain better what logic you want to make

  • Kind of what I’m trying to do is a slider with 3 small images enbaixo of a large ,clicking on 1 of the small ones I want to appear above in the large..

  • In this would be ideal to put an ID on each image, so in the href of the link you put the image ID, like this, <img id="n1"> and <a href="n1"> this way the two in the "same" value you get "linkalos", here is an answer that will help. Read the code carefully, it’s very simple to understand! https://answall.com/questions/284685/porque-o-hover-n%C3%A3o-sobrepoe-a-div/286117#286117

3


You can do that by taking the index of the clicked element and apply to the same index of the list element using the method .eq(índice) jQuery:

$('.suite-internal-link').on('click',function(e){
    e.preventDefault();
    $('.suite-internal-item')
    .eq($(this).index())
    .addClass('active')
    .siblings()
    .removeClass('active');
})
.suite-internal-item.active{
   background: red;
}

img{
   width: 40px;
   height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suite-internal-items">
       <li class="suite-internal-item active">
           <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
       </li>
        <li class="suite-internal-item">
            <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
        </li>
        <li class="suite-internal-item">
            <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
        </li>
</ul>
 <div class="suite-internal-links">
     <a href="" class="suite-internal-link">
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
     </a>
     <a href="" class="suite-internal-link">
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
     </a>
     <a href="" class="suite-internal-link">
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
     </a>
 </div>

  • Good Uncle, I knew I had a way to access the index, but I didn’t know how to use the .index() My idea was to use href to access the image id

  • Mt good sam. Thank you.

2

You can try it this way:

$('.suite-internal-item').on('click',function(e){
    e.preventDefault()
    $('.suite-internal-item').removeClass('active')
    $(this).addClass('active')   
})
.suite-internal-item{
  border:1px solid #f00;
}

.active{
  border:1px solid #00f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suite-internal-items">
       <li class="suite-internal-item active">
           <img src="assets/images/aloha1.jpg" alt="">
       </li>
        <li class="suite-internal-item">
            <img src="assets/images/aloha2.jpg" alt="">
        </li>
        <li class="suite-internal-item">
            <img src="assets/images/aloha3.jpg" alt="">
        </li>
</ul>
    <div class="suite-internal-links">
        <a href="" class="suite-internal-link">
            <img src="assets/images/aloha1.jpg" alt="">
        </a>
        <a href="" class="suite-internal-link">
            <img src="assets/images/aloha2.jpg" alt="">
        </a>
        <a href="" class="suite-internal-link">
            <img src="assets/images/aloha3.jpg" alt="">
        </a>
    </div>

  • Great Albertt!! you could show me how I would do by clicking on . suite-Internal-link and adc active on . suite-Internal-item, just like you did, just changing the target to . suite-Internal-link.

Browser other questions tagged jquery

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