[英]Angular switch opacity based on value
所以我有這兩個標志:
<div class="flag flag-srb" id="2" (click)="changeLanguage(2)">
<img src="assets/flags/srb.png" alt="srb" height="64" width="64">
</div>
<div class="flag flag-eng" id="1" (click)="changeLanguage(1)">
<img src="assets/flags/eng.png" alt="eng" height="64" width="64">
</div>
默認情況下,這兩者的不透明度都是 0.5。 css:
.flag {
display: inline;
padding-right: 10px;
opacity: 0.5;
}
現在我想將不透明度更改為 1 取決於用戶選擇的那個。 然后,當他切換到不同的標志(單擊不同的標志)時,他選擇的一個的不透明度變為 1,另一個恢復為 0.5。
當他點擊標志時,他激活了這個 function:
changeLanguage(id){
this.sightService.changeLanguageId(id);
this.sightService.getSights().subscribe(sights => {
this.sights = sights;
});
console.log("this.sights is now: ", this.sights);
console.log("id is",id);
var testNula = document.getElementById(id); //GET PICTURE WITH ID
var testDva = document.getElementById(id).id; //GET PICTURE ID, THE NUMBER
if(testDva == this.sights[0].pin_lang_id) { //WHAT I TRIED
console.log("THIS ONE IS SELECTED", testDva);
testNula.style.opacity = "1";
} else if (testDva != this.sights[0].pin_lang_id) {
testNula.style.opacity = "0.5";
}
}
注意this.sights[0].pin_lang_id
加載了一個服務。 因此,當他單擊標志時,情況會發生變化。 我想用這個來改變不透明度。
另外,當頁面加載時this.sights[0].pin_lang_id
是 2,所以第一個標志應該是 opacity 1,另一個是 0.5。 當他點擊英文標志時,第一個標志應該是 0.5 而英文 1。
在.ts中新建一個變量selectedLang
,在changeLanguageId
中根據索引更新變量
changeLanguage(id){
this.sightService.changeLanguageId(id);
this.sightService.getSights().subscribe(sights => {
this.sights = sights;
});
this.selectedLang = id;
}
<div class="flag flag-srb" id="2" [style.opacity]="{{this.selectedLang === 2 ? 1 : 0.5}}" (click)="changeLanguage(2)">
<img src="assets/flags/srb.png" alt="srb" height="64" width="64">
</div>
<div class="flag flag-eng" id="1" [style.opacity]="{{this.selectedLang === 1 ? 1 : 0.5}}" (click)="changeLanguage(1)">
<img src="assets/flags/eng.png" alt="eng" height="64" width="64">
</div>
您可以將變量設置為選定的標志索引
var selectedflag
指數;
然后根據服務為您提供索引設置標志值
this.selectflagindex =this.sights[0].pin_lang_id;
然后在模板中比較選定的索引並將不透明度設置為 1,但默認情況下將其設置為 0.5
你的 div 是這樣的
<div [ngStyle]="{'opacity':check selected(id)}" </div>
checkselected(id){ return this.selectedFlag == id ? '1' :'0.5'}
通過發送適當的 id,將為 div 設置不透明度值。
這將適用於任何數量的語言,而不僅僅是兩個
使用[類]:
<div class="flag flag-srb" id="2" [class.fullOpacity]="fullOpacity==2" (click)="changeLanguage(2); fullOpacity="2">
<img src="assets/flags/srb.png" alt="srb" height="64" width="64">
</div>
<div class="flag flag-eng" id="1" [class.fullOpacity]="fullOpacity==1"(click)="changeLanguage(1);[class.fullOpacity]="fullOpacity==1">
<img src="assets/flags/eng.png" alt="eng" height="64" width="64">
</div>
.full-opacity{
opacity:1 // you may need to set !important
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.