我將如何動態創建使用CSS3的jQuery UI元素？

我真的不知道如何解釋這一點，但我想將不同的顏色樣式應用於動態創建的jQuery UI按鈕。我認爲:nth-child(x)或nth-of-type(x)會有所幫助，但都沒有奏效。我是按照正確的順序排列它們，還是有其他可以幫助的事情？我將如何動態創建使用CSS3的jQuery UI元素？

我的JS：

var listContent = '<div id="PlayerPicker">'; 
$(xml).find('Character').each(function() { 
listContent += '<input type="radio" id="RB_' + $(this).attr('First') + 
    $(this).attr('Last') + '" name="player" class="ui-button-text" 
    style="background-color: transparent;"><label for="RB_' + 
    $(this).attr('First') + $(this).attr('Last') + '">' + $(this).attr('Title') 
    + ' ' + $(this).attr('First') + ' ' + $(this).attr('Middle').charAt(0) + '. 
    ' + $(this).attr('Last') + '</label>'; 
}); 
listContent += '</div>'; 
$('#Wrapper').html(listContent); 
$('#PlayerPicker').buttonset();

我的CSS：

#PlayerPicker .ui-button-text { 
    background: #ff3d3d; 
    background: -moz-linear-gradient(top, hsl(240,100%,62%) 1%, hsl(240,100%,15%) 48%, hsl(240,100%,62%) 49%, hsl(240,100%,15%) 68%, hsl(240,100%,50%) 95%, hsl(240,97%,24%) 100%); 
    background: -webkit-linear-gradient(top, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%); 
    background: linear-gradient(to bottom, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3d3d', endColorstr='#780202',GradientType=0); 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
    color: white; 
    border-radius: 99px; 
    font-size: 14pt; 
} 

#PlayerPicker:nth-child(2) .ui-button-text { 
    background: #ff3d3d; 
    background: -moz-linear-gradient(top, hsl(330,100%,62%) 1%, hsl(330,100%,15%) 48%, hsl(330,100%,62%) 49%, hsl(330,100%,15%) 68%, hsl(330,100%,50%) 95%, hsl(330,97%,24%) 100%); 
    background: -webkit-linear-gradient(top, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%); 
    background: linear-gradient(to bottom, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3d3d', endColorstr='#780202',GradientType=0); 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
    color: white; 
    border-radius: 99px; 
}

UPDATE：Here's my fiddle，@jmargolisvt。 JS已經被簡化了，但CSS是一樣的。

來源

2016-03-07 Shortstuff81000

請提供一份有關目前工作的[fiddle]（https://jsfiddle.net/）。 – jmargolisvt

您是否試過'#PlayerPicker .ui-button-text：nth-child（2）'而不是'#PlayerPicker：nth-child（2）.ui-button-text'？ – nnnnnn

@nnnnnn是的。多次。它沒有什麼區別。 – Shortstuff81000

檢查您使用JavaScript創建的HTML，您可以看到您需要標籤標籤上的樣式集。

#PlayerPicker .ui-button-text label {...} and 
#PlayerPicker .ui-button-text:checked label {...}

來源

2016-03-07 09:16:29

我在我的小提琴中嘗試過;它將按鈕重置爲其默認主題。我認爲這是因爲'.ui-button-text'已經處理了標籤。不過謝謝你的建議。 – Shortstuff81000

我將如何動態創建使用CSS3的jQuery UI元素？

回答

相關問題