removeClass Jquery

Asked

Viewed 294 times

1

I want to add a class to a link in a list, I got it, but I want to remove the class when I click on another link in the same list, and that the class stays only on the link clicked. add me but when I click on another link, the link previously clicked remains with the class. What I’m doing wrong???

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");
    }
});
jquery

  • You can show your HTML?

  • Also note that if($('span.started', this)) { will always come true. You must use .length to know if a jQuery collection is empty or not.

  • Only this snippet of HTML does not show all the elements involved in the @Candido question

  • Can you merge the rendered HTML? ie what appears in the browser when this script runs?

  • Sergio, I’m sorry, but I can’t, it’s a work thing, I shouldn’t even be asking, but this is really pissing me off... I’m sorry, and thank you for your understanding...

  • You want the class to be removed, but the orange background can be on the previous link?

  • I identified that when I click on another link, the background should also pass to another link, right?

  • 1

    @Candido I understand. You can create an example in jsFiddle with similar code that reproduces the problem. That’s simple jQuery, it’s just a matter of seeing your HTML to be able to give an example and explain.

  • Hello Jhonnyjks, tbm not, the background will be removed tbm...

  • See my answer below!

  • Thank you Sergio, for your attention, They are people like you, who deicham this world better!!!

  • Thanks Jhonnyjks! You helped me a lot! What I said to Sergio is good for you too, Vlu Cara!!!!

  • @Candido the answer accepted "help" or "solve" the problem? I still think the problem has not been described so we can reproduce...

  • @Sergio, it worked out, what I wanted! My only problem now is to remove the text "Watching", but this I will do still!!! Thanks!!!

  • Add $('.started').text("Assistir"); After the line q has removeClass(

Show 10 more comments

1 answer

0


Follow the answer, can be executed here!

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

  • 1

    Why $('.page_video_content ul li a').click(function() {? so has no delegation...

  • Thank you my dear! You helped me so much!!!

  • @Sergio, he needs all 'a' elements contained in the 'li' to receive the...

  • @Jhonnyjks but your selector is the same as his, only without delegating the event. If this HTML is dynamic it will fail right?

  • @Sergio yes, since listeners need to be reloaded if new 'a' elements are added. But for some reason, the way it was... I see...

  • @Sergio and Candido, I changed the line to have delegation, but no function in the execution system here in the OS, but in the browser worked normal.

Show 1 more comment

Browser other questions tagged jquery

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