如何获取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 的 bg 颜色。 “.pure-u-17-24”类位于 ID 为“premioCaixa+NumberofCounter”的 div 中。

我尝试过的

我将这 2 个变量紧跟在 "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

我认为你给自己添麻烦了。您应该使用

来获得除法

    var e = document.getElementById('whichever div');
    e.style.background = '#aa0000';
    // plus any other processing

与上面所有的东西相比，它会更快（更少的 DOM 查找）并且需要更少的代码。

我想编写一些可重用的代码，然后尝试类似的函数

        function backgroundChange(myDiv, newBackgroundColor){
            var e = document.getElementById(myDiv, newBackgroundColor);
            e.style.background = '#aa0000';

        }

Answer 2

尝试使用没有 JQuery 的常规 JS。

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

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

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

Answer 3

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