邮政网格布局上的随机不同彩色背景

问题描述：

我想用这个插件来显示博客帖子，但不是以图像为背景，客户端想要不同颜色的图像。从这里的另一篇文章中，我已经想出了我认为可以做到这一点的代码，但是我无法在网站上看到它！这里是我做的似乎在这里工作的代码。 Example where code is working.邮政网格布局上的随机不同彩色背景

这是目前有问题的网站。 The div site where it isn't working like it should...

你会看到所有的颜色都是一样的，而不是像交替他们应该是... 任何有益的建议将在这是为什么不工作是极大的赞赏。

这是CSS和JS在上面的jsfiddle。

的CSS：

.custom_tdgclients_grid{width:20%;height:90px;display:inline-block} 
.custom_tdgclients_grid{background:#a7948b} 
.custom_tdgclients_grid:nth-child(2n){background-color:rgb(232, 73, 73)!important;} 
.custom_tdgclients_grid:nth-child(3n){background-color:rgb(83, 71, 65)!important;} 
.custom_tdgclients_grid:nth-child(4n){background-color:#e8d2af!important;} 
.custom_tdgclients_grid:nth-child(5n){background-color:rgb(131, 119, 113)!important;} 
.custom_tdgclients_grid:nth-child(6n){background-color:rgb(216, 184, 133)!important;} 
.custom_tdgclients_grid:nth-child(7n){background-color:rgb(201, 93, 93)!important;} 
.custom_tdgclients_grid:nth-child(8n){background-color:#e8d2af!important;}

和JavaScript：

$('.custom_tdgclients_grid:nth-child(2n)').css({'background-color':'rgb(232, 73, 73)'}); 
$('.custom_tdgclients_grid:nth-child(3n)').css({'background-color':'rgb(83, 71, 65)'}); 
$('.custom_tdgclients_grid:nth-child(4n)').css({'background-color':'#e8d2af'}); 
$('.custom_tdgclients_grid:nth-child(5n)').css({'background-color':'rgb(131, 119, 113)'}); 
$('.custom_tdgclients_grid:nth-child(6n)').css({'background-color':'rgb(216, 184, 133)'}); 
$('.custom_tdgclients_grid:nth-child(7n)').css({'background-color':'rgb(201, 93, 93)'}); 
$('.custom_tdgclients_grid:nth-child(8n)').css({'background-color':'rgb(181, 128, 101)'});

答

尝试取出n从2n，`3N，等等

如果它不工作，试图找出他们与他们的父母一样喜欢：
#parent .custom_tdgclients_grid:nth-child(2)

希望，它会工作:)

看着div网站，你觉得父母是什么？这里有很多关于他们可爱的wordpress短代码，我不知道哪一个是父母。我尝试删除** n **并使用代码，但它没有改变任何东西。 – Tyrii

我简化了它，但它似乎仍然无法正常工作。 .vc_gitem-zone.custom_tdgclients_grid：nth-child（1）{background-color：＃a7948b;} – Tyrii

答

我想出了解决这个问题的代码。我将在此发布给任何可能需要它的人。识别他们与他们的父母，我认为是关键！

#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid {background-color: #a7948b;} 
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid { background-color: rgb(232, 73, 73);} 
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid { background-color: rgb(83, 71, 65);} 
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid { background-color: #e8d2af;} 
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid { background-color: rgb(131, 119, 113);} 
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid { background-color: rgb(216, 184, 133);} 
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid { background-color: rgb(201, 93, 93);} 
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid { background-color: #e8d2af;}

然后只是做JS侧代码相同。

这就是我说的... – KillianC

邮政网格布局上的随机不同彩色背景

相关推荐