Question

我尝试使用jQuery事件处理程序创建一个简单的swappale CSS主题。正如你所看到的，我能够修改.outer但我不知道如何设计跨度。默认主题不需要进一步自定义，但我想更改跨度的颜色/大小并为“mytheme”应用悬停效果等。

不应该更改HTML，但可以编辑JS。任何输入都非常感谢。如何将[data-theme =＆＃34; mytheme＆＃34;]与其他元素一起使用？

这是HTML：

<div class="outer" data-theme="default">
<ul class="list">
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
    <li><span>8</span></li>
    <li><span>9</span></li>
    <li><span>0</span></li>
</ul>
<input type="button" value="Swap Theme" id="btnSwapTheme" />
</div>

JS：

$(document).ready(function() {
//Swap Theme event handler
$('#btnSwapTheme').on('click', function(evt) {
    var theme = $('div.outer').attr('data-theme');
    if (theme == 'default') {
        $('div.outer').attr('data-theme', 'mytheme');
    } else {
        $('div.outer').attr('data-theme', 'default');
    }
});
});

CSS：

.outer {
text-align: center;
}
.outer input {
margin: 0.5em;
}
.outer[data-theme="default"] {
background-color: #c0c0c0;
}

.outer[data-theme="mytheme"] {
background-color: red;
}

ul.list {
width: 13em;
margin: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.list li {
display: inline-block;
font-weight: bold;
border: 1px solid blue;
margin: .5em;
}
ul.list li span {
display: inline-block;
height: 3em;
width: 3em;
line-height: 3em;
cursor: pointer;
}

Answer 1

例如：

.outer[data-theme="mytheme"] span {
    background-color: green;
}
.outer[data-theme="mytheme"] span:hover {
    background-color: coral;
}

演示：http://jsfiddle.net/6kyhbhus/1/

您只需要为.outer[data-theme="mytheme"]添加任何选择器前缀，因为这是包装元素的容器。

使用jQuery事件处理程序的可交换CSS主题

1 个答案:

演示：http://jsfiddle.net/6kyhbhus/1/