Question

我真的不知道如何解释这个，但我想将不同的颜色样式应用于动态创建的jQuery UI按钮。我认为:nth-child(x)或nth-of-type(x)会有所帮助，但两者都没有效果。我是按正确顺序排列的，还是有其他有用的东西？

我的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;
}

更新：Here's my fiddle，@ jmargolisvt。 JS已被简化，但CSS是相同的。

Answer 1

检查您使用JavaScript创建的HTML，您可以看到您需要在label标签上设置样式。

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

我将如何使用CSS3动态创建jQuery UI元素？

1 个答案: