Changing the background color of a selected div using jQuery

Question

Changing the background color of a selected div using jQuery

I am working on a selection menu that includes a smarty foreach loop to display game venues, dates, and logos. When a user taps on a specific game, I want to change the background color of that div to green.

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

After implementing a jQuery function to add the "greenBackground" class when a user clicks on a hyperlink, I encountered an issue where the background color persists when moving to the next game div. How can I remove this added class upon selecting a new game? Your assistance is greatly appreciated. Thank you.

javascript jquery html css

Answer 1

Answer №1

Try out this code snippet:

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

        // Remove any existing 'greenBackground' classes
        $('.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 () { });
    });
});

Answer 2

Try out this code snippet:

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

        // Remove any existing 'greenBackground' classes
        $('.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 () { });
    });
});

Changing the background color of a selected div using jQuery

Answer №1

Similar questions

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

Transferring time for streaming MP3 files from server to HTML5 audio

Finding the index of a chosen option in Angular

Creating custom functions within views using Sencha Touch 2

Disregard the instructions upon loading the page

What is the best way to merge two tables together using the server-side JQuery Datatable plugin?

Reactjs does not display a div element on the page

Inject the contents of an HTML file into a Vue div

Exploring the functionalities of the modulus operator in Handlebars

Using AJAX to search through paginated pages is quite simple and effective

generate a series of nested divs within one another

Upgrade angular-chart.js when applied to a filtered collection

Javascript recursive method for fetching data entries

Is there a way to prevent the React history.push from reloading the component every time? I only want

Guidelines for capturing a webpage screenshot and sending it back to the client using asp.net and phantomjs

When HTML files are uploaded to a server, the icons may not appear on the website

Guide to selecting HTML components from an Angular service

Modifying input field attributes with JavaScript

Using the IE method getelementbyid to target an object within the document

Using PHP's header function to alter directories