![](/img/trans.png)
[英]How to dynamically change text colour based on dynamically changing background colour
[英]buttons not changing colour of background and text
我顯然對此代碼做錯了。 不知道是什么,但它確實出錯了。
我想要它,以便當您單擊按鈕的顏色時背景和文本會更改字體,目前沒有
<style>
.red { background-color: red; }
.red p { font-style: normal; }
.blue { background-color: blue; }
.blue p { font-style: italic; }
.green { background-color: green; }
.green p { font-style: oblique;}
</style>
<div ng-class={{colorScheme}}>
<button ng-click="colorScheme = 'red'">ColorScheme Red</button>
<button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
<button ng-click="colorScheme = 'green'">ColorScheme Green</button>
<p>Awesome content</p>
</div>
只需將范圍變量傳遞給ng-class
var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope) {})
.red { background-color: red; } .red p { font-style: normal; } .blue { background-color: blue; } .blue p { font-style: italic; } .green { background-color: green; } .green p { font-style: oblique; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app" ng-controller="AppController"> <div ng-class="colorScheme"> <button ng-click="colorScheme = 'red'">ColorScheme Red</button> <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button> <button ng-click="colorScheme = 'green'">ColorScheme Green</button> <p>Awesome content</p> </div> </div>
如果您使用ng-class,則不要放置表達式{{}},而直接使用范圍對象。 因為它的默認指令為angular,所以他們不希望表達式{{}}
否則以回答我的方式使用帶有表達式的類
<div class="{{colorScheme}}">
<button ng-click="colorScheme = 'red'">ColorScheme Red</button>
<button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
<button ng-click="colorScheme = 'green'">ColorScheme Green</button>
<p>Awesome content</p>
</div>
由於您還標記了JQuery ...這對我有用:
$("button").click(function(){
$(this).parent().removeClass().addClass($(this).attr('color'));
});
這是JSFiddle演示 :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.