郵政網格佈局上的隨機不同彩色背景

我想用這個插件來顯示博客帖子，但不是以圖像爲背景，客戶端想要不同顏色的圖像。從這裏的另一篇文章中，我已經想出了我認爲可以做到這一點的代碼，但是我無法在網站上看到它！這裏是我做的似乎在這裏工作的代碼。 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)'});

來源

2016-07-26 Tyrii

嘗試取出n從2n，`3N，等等

如果它不工作，試圖找出他們與他們的父母一樣喜歡：
#parent .custom_tdgclients_grid:nth-child(2)

希望，它會工作:)

來源

2016-07-26 15:02:51 KillianC

看着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側代碼相同。

來源

2016-07-28 01:47:54 Tyrii

這就是我說的... – KillianC

郵政網格佈局上的隨機不同彩色背景

回答

相關問題