<h1 data-tag="titleColor" data-color>jDux is super cool!</h1>
<div>
<button class="buttonRed">red</button>
<button class="buttonBlue">blue</button>
<button class="buttonGreen">green</button>
</div>
<div>
Count = <span data-tag="num" data-text>#</span>
<button type="button" id="inc">+</button>
<button type="button" id="dec">-</button>
</div>
<div>
<p>First Name: <span data-tag="firstName" data-text></span></p>
<input id="firstNameInput" type="text" val="" />
<p>Last Name: <span data-tag="lastName" data-text></span></p>
<input id="lastNameInput" type="text" val="" />
</div>
<div class="link"><a href="https://codepen.io/meredithmatthews/pen/dyoOMKE" target="_blank">Redux with jQuery example</a></div>div {
margin: 10px 0;
}
.link {
margin-top:30px;
}
[data-color='black'] {
color: black;
}
[data-color='red'] {
color: red;
}
[data-color='blue'] {
color: blue;
}
[data-color='green'] {
color: green;
}var State = {
num: 0,
firstName: "",
lastName: "",
titleColor: "black",
updateState: function(key, value){
this[key] = value;
$("[data-text]").each(function(index, elem){
var tag = $(elem).attr("data-tag");
$(elem).text(State[tag]);
});
$("[data-color]").each(function(index, elem){
var tag = $(elem).attr("data-tag");
$(elem).attr("data-color", State[tag]);
});
}
};
$(document).ready(function(){
State.updateState();
});
$("#inc").on("click", function(){
State.updateState("num", State.num + 1)
});
$("#dec").on("click", function(){
State.updateState("num", State.num - 1)
});
$("#firstNameInput").on("input", function(){
State.updateState("firstName", $(this).val() )
});
$("#lastNameInput").on("input", function(){
State.updateState("lastName", $(this).val() )
});
$('[class^=button]').on("click", function(e) {
State.updateState('titleColor', e.target.innerText);
});
External CSS
This Pen doesn't use any external CSS resources.