如何获取ID并更改背景

Question

I'm trying to change a background color of a div when the user click on the button. How I have 5 divs, each ID will be different.

PHP

<?php
    $valorPremio = 0;
?>

@foreach($premios as $premio)
    <div class="pure-g" data-id="{{$valorPremio++}}" id="premioCaixa{{$valorPremio}}">
        <div class="pure-u-17-24">
            <span class="tituloPremio">{{$premio->titulo}}</span>
            <span class="dataPremio">{{substr($premio->data,8,2);}}{{'/'.substr($premio->data,5,2)}}{{'/'.substr($premio->data,0,4)}}</span>
            <p class="subtituloPremio">{{$premio->subtitulo}}</p>
            <div class="textoPremio">
                {{$premio->olho}}
            </div>
            <div class="textoPremioEscondido hide">
                {{$premio->texto}}
            </div>
        </div>
        <div class="pure-u-6-24">
            <img src="assets/images/premios/{{$premio->imagem}}" alt="{{$premio->titulo}}" class="pure-img"/>
            <div class="leiaMais" href="">VER MAIS +</div>
        </div>
    </div>
@endforeach

Javascript

$(function() {
     $('.leiaMais').click(function(){
        var textoPremioEscondido = $(this).parent().parent().find('.textoPremioEscondido');

        if(!textoPremioEscondido.hasClass('show')) {            
            // Exibe o conteúdo do texto oculto
            textoPremioEscondido.slideDown(function() {
                textoPremioEscondido.addClass('show').removeClass('hide');
                textoPremioEscondido.parent().parent().find('.pure-u-6-24').css('background-color', '#004351');
                textoPremioEscondido.parent().css('background-color', '#004351');
                textoPremioEscondido.parent().find('.textoPremio').css("color","#fff");
                textoPremioEscondido.parent().find('.textoPremioEscondido').css("color","#fff");
                $(this).parent().parent().find('.leiaMais').html("VER MENOS -");


            });
        }
        else {
            // Remove qualquer texto que esteja sendo mostrado
            $('.pure-u-17-24').find('.show').slideUp(function() {
                $(this).addClass('hide').removeClass('show');
                $(this).parent().css('background-color', '#9BAAAF');
                $(this).parent().find('.textoPremio').css("color","#004351");
                $(this).parent().find('.textoPremioEscondido').css("color","#004351");
                $(this).parent().parent().find('.pure-u-6-24').css('background-color', '#9BAAAF');  
                $(this).parent().parent().find('.leiaMais').html("VER MENOS +");
            });
        }

    });
});

Explaining this Javascript

For now, this javascript only shows a text and change bg colour of 2 divs. The class ".pure-u-17-24" is inside of div that has the ID "premioCaixa+NumberofCounter".

What I've tried

I put this 2 variables immediately after "var textoPremioEscondido..."; dataIdDiv obtain a number, and I've use it for get the ID of div.

var dataIdDiv = $(this).parent().parent().data("id");
var idDiv = $(this).parent().parent()[dataIdDiv].id;

After this I've saved the file and test the slideUp and slideDown. Only the first DIV could execute the javascript, executing the 2 effects, different of the others, how did nothing.

The idea is use the code(below) inside the slideUp and slideDown function to change DIV background-color.

idDiv.css('background-color', '#004351');

Answer 1

Try using regular JS without JQuery.

document.getElementById('the_id').style.backgroundColor="AA0000";
document.getElementById('the_second_id').style.backgroundColor="AA0000";
//etc.

Or make it easier by adding a class to each div

document.getElementsByClassName('the_class').style.backgroundColor="AA0000";