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

Swappable CSS theme with jQuery event handler

本文关键字：jQuery 事件处理 程序 CSS 可交换      更新时间：2023-09-26

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

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

这是 JSFiddle

这是 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;
}

例如这样：

.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"]，因为这是元素的包装容器。

相关文章：