0
나는 아주 간단하고 간단한 것을 시도하고있다. 나는 색깔의 사각형으로 만든 (class = "AccentSquares")를 클릭하고 싶다. 각 사각형의 색은 다른 테마 색에 해당합니다. 상단에있는 막대 (class = "MobileNewAccountHeader")는 기본적으로 "purple"으로 설정되어 있으며 클릭하는 사각형의 색상으로 변경되어야합니다. 여기에 내가 가진 것이있다.검도 MVVM 비동기 배경색 바인딩
HTML
<div id="UserAccentColor">
<div class="MobileNewAccountHeader" style="margin-bottom: 0" data-bind="style: { backgroundColor: themecolor }">Accent Color</div>
<div class="HeaderBarWhite">
<div class="Cancel" data-bind="click: cancel">Cancel</div>
<div class="Save" data-bind="click: save">Save</div>
</div>
<div class="PasswordFont" style="padding: 10px;">
Select from the six colors below to set your accounts theme color.
</div>
<div style="margin-top: 10px; width: 89.8%; margin-left: 5%">
<div class="AccentSquares" data-bind="click: change1, style: { backgroundColor: color1 }"></div>
<div class="AccentSquares" data-bind="click: change2, style: { backgroundColor: color2 }"></div>
<div class="AccentSquares" data-bind="click: change3, style: { backgroundColor: color3 }"></div>
<div class="AccentSquares" data-bind="click: change4, style: { backgroundColor: color4 }"></div>
<div class="AccentSquares" data-bind="click: change5, style: { backgroundColor: color5 }"></div>
<div class="AccentSquares" data-bind="click: change6, style: { backgroundColor: color6 }"></div>
</div>
jQuery를
var newaccountcolorvm = kendo.observable({
themecolor: "purple",
color1: "purple",
color2: "greenyellow",
color3: "green",
color4: "yellow",
color5: "pink",
color6: "orange",
chang1: function() {
this.set("themecolor", "purple");
},
chang2: function() {
this.set("themecolor", color2);
},
chang3: function() {
this.set("themecolor", "green");
},
chang4: function() {
this.set("themecolor", "yellow");
},
chang5: function() {
this.set("themecolor", "pink");
},
chang6: function() {
this.set("themecolor", "orange");
},
cancel: function() {
pageNav("#FirstTimeUserSettings");
},
save: function() {
pageNav("#FirstTimeUserSettings");
}
}); 당신 DIV 년대에