en.javascript.info/02-ui/05-widgets/02-widgets-structure/04-voter/solution/index.html
Ilya Kantor f301cb744d init
2014-10-26 22:10:13 +03:00

69 lines
1.2 KiB
HTML
Executable file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.voter {
font-family: Consolas, "Lucida Console", monospace;
font-size: 18px;
}
.up, .down {
cursor: pointer;
color: blue;
font-weight: bold;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div id="voter" class="voter">
<span class="down"></span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<script>
function Voter(options) {
var elem = options.elem;
var voteElem = elem.find('.vote');
elem.on('click', '.down', onDownClick)
.on('click', '.up', onUpClick)
.on('mousedown selectstart', false);
// ----------- методы -------------
function onDownClick() {
voteDecrease(); // сам обработчик не меняет голос, он вызывает функцию
}
function onUpClick() {
voteIncrease();
}
function voteDecrease() {
voteElem.html( +voteElem.html()-1 );
}
function voteIncrease() {
voteElem.html( +voteElem.html()+1 );
}
this.setVote = function(vote) {
voteElem.html( +vote );
};
}
var voter = new Voter({
elem: $('#voter')
});
voter.setVote(1);
</script>
</body>
</html>