更改div的颜色和数量onclick [英] Change color and number onclick of a div

问题描述

我想在点击div时更改html元素的颜色和数量。
例如，当您单击向上箭头时，数字从4更改为5，颜色
也更改。

I'd like to change a color and number of a html element on click of a div. For example, when you click up-arrow the number changes from 4 to 5 and the color changes as well.

initial state

&uarr ; 4↓

↑ 4 ↓

upvoted

$ b b

↑

↑ 5 ↓

down voted

↑ 3 ↓

这里是我到目前为止。

我知道如何改变div的颜色，但我不知道如何将div的颜色从不同div的onclick中更改。然后在其顶部添加+1或-1。

↑ 3 ↓

here's what I have so far.
I know how to change the color of a div on click, however I don't know how to change the color of a div from an onclick of a different div. And then on top of that add the +1 or -1.

http： //jsfiddle.net/64QpR/23/

note-用户：

note- user:uneducatedguy just asked this same question however he deleted it because people were making fun of him since he called it a fiddle in stead of a jsfiddle.

推荐答案

使用淘汰这很简单：

HTML：

<div class="arrow-up" data-bind="click: num.upvote.bind(num)"></div>
<h5 data-bind="text: num.value, css: { pink: num.changed }">3</h5>
<div class="arrow-down" data-bind="click: num.downvote.bind(num)"></div>

javaScript：

javaScript:

function Num(value) {
    this.value = ko.observable(value);
    this.changed = ko.observable(false);
}

Num.prototype.upvote = function() {
    this.value(this.value()+1);
    this.changed(true);
}

Num.prototype.downvote = function() {
    this.value(this.value()-1);
    this.changed(true);
}

var model = {
        num: new Num(1),
}

ko.applyBindings(model);

查看实际操作：

a href =http://jsfiddle.net/bikeshedder/UvKsz/ =nofollow> http://jsfiddle.net/bikeshedder/UvKsz/

http://jsfiddle.net/bikeshedder/UvKsz/

防止多票投票：

http://jsfiddle.net/bikeshedder/UvKsz/1/

这篇关于更改div的颜色和数量onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！