CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hannes
Hannes

Reputation: 25

Swappable CSS theme with jQuery event handler

I'm trying to create a simple swappale CSS theme with a jQuery event handler. As you can see, I was able to modify .outer but I don't know how to style the spans. The default theme doesn't need further customization, but I would like to change the color/size of the spans and apply a hover effect, etc. for 'mytheme'.

The HTML shouldn't be changed but the JS can be edited. Any input is highly appreciated. How can I use [data-theme="mytheme"] with other elements?

Here's the JSFiddle

This is the 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;
}

Upvotes: 1

Views: 96

Answers (1)

dfsq
dfsq

Reputation: 193261

For example like this:

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

Demo: http://jsfiddle.net/6kyhbhus/1/

You just need to prefix any selector with .outer[data-theme="mytheme"] since this is wrapping container for your elements.

Upvotes: 1

Related Questions