javascript - jquery选中的div背景颜色改变

Question

我有一个像这样的选择菜单

<div class="leftgame-container">
    {foreach from=$game_arrayleft item=row}
    <div class="left-column">
        <div class="team-logo">
            <img width="72" height="68" src="../public/img/logo/{$row.logo}" alt="Teamlogo">
        </div>
        <div class="team-name">
            {$row.venue}<br>
            {$row.game_date|date_format:"%e. %B  %Y"}    
        </div>
        <div class="team-check">
            {if $row.status eq 1}
            {html_checkboxes name='gamecheck' values=$row.id separator='<br />'}
            {/if}
        </div>
    </div>
    {/foreach}
</div>

这是一个聪明的 foreach 循环。比赛 field 、日期、标志会显示在这里。当用户点击特定游戏时，我想将该 div 背景颜色更改为绿色。

这是我的 Jquery 代码

$(document).ready(function() {
    $('a.pagerlink').click(function(event){
        console.log('hyperlink click');
        $(this).children('.manage-friends-first').addClass("greenBackground");
        var id = $(this).attr('id');
        $('#load').show();
        $.post(
            "invited-friends",
            { gameid: id },
            function(data) {}
        )
        .fail(function() {})
    });
});

这里，当用户单击超链接时，我将“greenBackground”类附加到“manage-friends-first”。背景颜色正在改变。但我的问题是什么时候删除这个类？。当用户点击下一个游戏 div 时，早期 div 的背景颜色仍然存在。请帮我解决这个问题。谢谢

Answer 1

使用这个:

$(document).ready(function () {
    $('a.pagerlink').click(function (event) {

        //Remove all the class `greenBackground` from already added dom
        $('.greenBackground').removeClass('greenBackground');

        console.log('hyperlink click');
        $(this).children('.manage-friends-first').addClass("greenBackground");
        var id = $(this).attr('id');
        $('#load').show();
        $.post("invited-friends",
                {gameid: id},
        function (data) { }).fail(function () { });
    });
});