javascript - 如何获取ID和更改背景

Question

当用户单击按钮时，我试图更改 div 的背景颜色。我怎么有5个div，每个ID都会不同。

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

    });
});

解释这个 JavaScript

目前，此 JavaScript 仅显示文本并更改 2 个 div 的背景颜色。类“.pure-u-17-24”位于 ID 为“premioCaixa+NumberofCounter”的 div 内部。

我尝试过的

我将这两个变量放在“var textoPremioEscondido...”之后； dataIdDiv 获取一个数字，我用它来获取 div 的 ID。

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

此后，我保存了文件并测试了 SlideUp 和 SlideDown。只有第一个DIV可以执行javascript，执行2个效果，与其他效果不同，怎么什么也没做。

这个想法是使用slideUp和slideDown函数中的代码(下面)来更改DIV背景颜色。

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

Answer 1

尝试使用常规 JS，而不使用 JQuery。

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

或者通过向每个 div 添加一个类来使其更容易

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