0

Problema

Quero fazer com que ele adicione o atributo active em suite-internal-item e remova nos que tem, porém não está funcionando.

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>
2
  • Qual é sua dúvida? Commented 18/02/2019 às 18:46
  • Estou querendo fazer com que ele adc o atributo 'active' na class suite-internal-item e remova os active que tem, mais nao esta funcionando Commented 18/02/2019 às 18:48

3 Respostas 3

3

Pode fazer isso pegando o index do elemento clicado e aplicar ao mesmo index do elemento da lista usando o método .eq(índice) do 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>

2
  • Boa Tio, sabia que tinha uma forma de acessar o index, mas não soube como usar o .index() A minha ideia era usar o href para acessar o id da imagem
    – hugocsl
    Commented 18/02/2019 às 19:26
  • Mt bom sam. Obrigado. Commented 18/02/2019 às 20:16
3

Vc pode usar o $(this) e .siblings() para dizer que o item clicado deve adicionar a classe ativo ao mesmo tempo que vc remove a classe dos irmão.

Segue o exemplo:

$(".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>

4
  • Otimo hugo!! vc poderia me mostrar como eu faria clicando em .suite-internal-link e adc active em .suite-internal-item, dessa mesma forma que você fez, so apenas mudando o alvo para .suite-internal-link. Commented 18/02/2019 às 19:02
  • Ai fica um pouco complicado, pq como vc vai definir em qual dos 3 .suite-internal-item vc quer add a classe? Vc tem que explicar melhor qual lógica que quer fazer
    – hugocsl
    Commented 18/02/2019 às 19:14
  • Tipo isso que eu estou tentando fazer é um slider com 3 imagens pequenas enbaixo de uma grande ,clicando em 1 das pequenas quero que apareça encima na grande.. Commented 18/02/2019 às 19:19
  • Nesse seria ideial colocar um ID em cada imagem, assim no href do link vc coloca o ID da imagem, tipo assim, <img id="n1"> e <a href="n1"> dessa forma os dois dentro o "mesmo" valor vc consegue "linkalos", aqui tem uma resposta que vai de ajudar. Leia o código com atenção, é bem simples de entender! pt.stackoverflow.com/questions/284685/…
    – hugocsl
    Commented 18/02/2019 às 19:24
2

Você pode tentar dessa forma:

$('.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>

1
  • Otimo Albertt!! vc poderia me mostrar como eu faria clicando em .suite-internal-link e adc active em .suite-internal-item, dessa mesma forma que você fez, so apenas mudando o alvo para .suite-internal-link. Commented 18/02/2019 às 19:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .