gpt4 book ai didi

javascript - 基于值的 Angular 开关不透明度

转载 作者:太空宇宙 更新时间:2023-11-04 05:51:04 24 4
gpt4 key购买 nike

所以我有这两个标志:

enter image description here

<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。

当他点击旗帜时,他激活了这个功能:

 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,所以第一个标志应该是不透明度 1,其他的 0.5。当他点击英文旗帜时,第一个旗帜应该是0.5,而英文是1。

最佳答案

在.ts中创建一个新变量selectedLangchangeLanguageId 中根据索引更新变量

 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>

关于javascript - 基于值的 Angular 开关不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58273302/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com