为什么 handleClick() 不改变样式？

Question

我的Stencil.js组件有问题。我想制作一个带有两个按钮的图像滑块。单击第一个按钮时，imgs的索引为-1。当点击第二个按钮时，它会变成+1。我尝试使用clickHandler来更改CSS。imgs的当前显示设置为"none"。如果我单击它，它应该更改为块或类似的内容。但它说"找不到风格"。我想念什么吗？

JS代码：

import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'outfitslider-nicole',
styleUrl: 'outfitslider-nicole.css',
shadow: true
})
export class AppOutfitvorschläge {
@Prop() Kategorie1: string;
@Prop() Kategorie2: string;
@Prop() Kategorie3: string;
@Prop() Infotext: string; 
handleClick(event: UIEvent) {
var imgIndex: number = 1;
function vorIndex(n: number){
showingThis(imgIndex += n);
}
function showingThis(n: number){
var i: number;
var sectors = document.getElementsByClassName("outfit1");
//beginnt wieder von vorne
if (n > sectors.length){
imgIndex = 1;
}
//nimmt Länge an
else if (n < 1){
imgIndex = sectors.length;
}
for(i = 0, i < sectors.length, i++){
sectors[i].style.display = "none";
}
sectors[imgIndex-1].style.display = "block";
}
}
render() {
return (
<div class="outfitslider">
<button id="zurück" onClick={ (event: UIEvent) => this.handleClick(event)}>&laquo;</button>
<div class="slider-content">
<ul>
<li class="outift1">
<div class="inner-content">
<div class="right-content">
<h4 class="title">{this.Kategorie1}</h4>
<p>{this.Infotext}</p>
</div>
<div class="left-content">
<div class='img'><img src="/assets/L/outfit3.png"></img></div>
</div>
</div>
</li>
<li class="outift1">
<div class="inner-content">
<div class="right-content">
<h4 class="title">{this.Kategorie2}</h4>
<p>{this.Infotext}</p>
</div>
<div class="left-content">
<div class='img'></div>
</div>
</div>
</li>
<li class="outift1">
<div class="inner-content">
<div class="right-content">
<h4 class="title">{this.Kategorie3}</h4>
<p>{this.Infotext}</p>
</div>
<div class="left-content">
<div class='img'></div>
</div>
</div>
</li>
</ul>
</div>
<button id="weiter">&raquo;</button>
</div>
);
}
}

还有我的CSS：

.inner-content{
align-items: center;
align-self: center;
max-height: 500px;
overflow: hidden;
}
.slider-content ul li{
list-style: none;
display: none;
}
.title{
font-size: 15pt;
}
.left-content{
display: inline-block;
width: 25%;
position: relative;
text-align: left;
padding: 5px 10px 10px 10px;
align-self: center;
margin: 10px 0 10px 0;
bottom: -50px;
overflow: hidden;
}
.img{
background-color: grey;
height: 300px;
width: 300px;
max-width: 300px;
max-height: 300px;
align-self: center;
}
.img img{
height: 300px;
width: 300px;
max-width: 300px;
max-height: 300px;
align-self: center;
}
.right-content{
background: whitesmoke;
display: inline-block;
max-width: 25%;
position: relative;
text-align: left;
padding: 10px;
align-self: center;
margin: 10px 0 10px 0;
}
#weiter {
max-width: 50px;
padding: 8px 16px;
background-color: #BBD6FF;
color: white;
font-weight: bold;
position: absolute;
left: 76%;
top: 50%;
border: none;
height: 40px;
}
#zurück {
max-width: 50px;
padding: 8px 16px;
background-color: #BBD6FF;
border: none;
color: white;
position: absolute;
left: 20%;
top: 50%;
font-weight: bold;
height: 40px;
}

Answer 1

您在handleClick方法中定义了vorIndex函数，但从未调用过它。您还在每次运行处理程序时(重新(将imgIndex设置为1。您可能希望将索引存储为类成员。

此外，您在showingThis函数中使用document.getElementsByClassName("outfit1")，但此选择器不起作用，因为1(您的模板(<li class="outift1">(中有拼写错误，2(由于Shadow DOM的原因，您将无法访问组件内的元素(毕竟您已经在组件装饰器中设置了shadow: true(。

有几种方法可以解决这个问题。要在组件中使用DOM API，可以使用@Element装饰器来获取组件主机的引用：

@Element() host;
handleClick() {
const sectors = this.host.shadowRoot.querySelectorAll('.outfit1');
}