如何获取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颜色。课程＆＃34; .pure-u-17-24＆＃34;在div里面有ID＆＃34; premioCaixa + NumberofCounter＆＃34;。

我尝试了什么

我在＆＃34; var textoPremioEscondido ...＆＃34 ;;之后立即将这两个变量放在一起。 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

尝试使用不带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 2

我认为你为自己制造困难。你应该使用

来获得分部

    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 3

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