1

Quero adicionar uma classe em um link de uma lista, eu consegui, porém quero remover a classe quando clico em outro link da mesma lista, e que a classe permaneça somente no link clicado. adicionar eu adiciono porém quando clico em outro link, o link clicado anteriormente permanece com a classe. O que estou fazendo de errado???

HTML

<li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class=""></span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>

JQuery

$(document).on('click', '.page_video_content ul li a', function() {

    $('.page_video_content ul li a span').removeClass('started');

    $('span', this).addClass('started');
    if($('span.started', this)) {
        $('span.started', this).css({
            'background': '#f3c03d'
        }).text("Assistindo");
    }
});
15
  • Podes mostrar o teu HTML?
    – Sergio
    1/04/2016 às 17:17
  • Repara também que if($('span.started', this)) { vai sempre dar verdadeiro. Deves usar .length para saber se uma coleção jQuery está vazia ou não.
    – Sergio
    1/04/2016 às 17:21
  • Somente esse trecho do HTML não mostra todos os elementos envolvidos na questão @Candido 1/04/2016 às 17:26
  • Podes juntar o HTML renderizado? ou seja o que aparece no Browser quando esse script corre?
    – Sergio
    1/04/2016 às 17:28
  • 1
    @Candido compreendo. Podes criar um exemplo no jsFiddle com código parecido e que reproduza o problema. Isso é jQuery simples, é só uma questão de vêr o teu HTML para poder dar um exemplo e explicar.
    – Sergio
    1/04/2016 às 17:36

1 Resposta 1

0

Segue a resposta, podendo ser executada aqui mesmo!

$(document).on('click', '.page_video_content ul li a', function() {
    alert('lol');
  $('.started').css('background', '');
  $('.started').removeClass('started');

    $('span', this).addClass('started');
    if($('span.started', this)) {
        $('span.started', this).css({
            'background': '#f3c03d'
        }).text("Assistindo");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="page_video_content">
  <ul>
<li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class="started">Assistindo</span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>
  </li>
  
  <li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class="">Assistindo</span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>
  </li>
  
  <li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class="">Assistindo</span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>
  </li>
    </ul>
  </div>

6
  • 1
    Porquê $('.page_video_content ul li a').click(function() {? assim não tem delegação...
    – Sergio
    1/04/2016 às 17:44
  • Obrigado meu querido! Você me ajudou muito!!!
    – José
    1/04/2016 às 17:46
  • @Sergio, ele precisa que todos os elementos 'a' contidos nos 'li' recebam o listener... 1/04/2016 às 17:47
  • @Jhonnyjks mas o teu seletor é igual ao dele, somente sem delegar o evento. Se esse HTML fôr dinamico isso vai falhar certo?
    – Sergio
    1/04/2016 às 17:49
  • @Sergio sim, uma vez que os listeners precisam ser recarregados caso sejam adicionados novos elementos 'a'. Porém, por algum motivo, do modo que estava não funfou... estou vendo... 1/04/2016 às 17:59

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 .