Javascript 为什么'；t handleClick（）更改样式？

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

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>
    );
  }
}

---

您正在

handleClick

方法中定义

vorIndex

函数，但从未调用它。每次处理程序运行时，您也（重新）将

imgIndex

设置为1。您可能希望将索引存储为类成员

此外，您在显示此函数的

中使用了
document.getElementsByClassName（“outfift1”）
，但此选择器不起作用，因为1）您的模板中有输入错误（
），2）由于阴影DOM，您将无法访问组件中的元素（毕竟，您已经在组件装饰器中设置了
shadow:true
）

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

@Element（）主机；
handleClick（）{
const sectors=this.host.shadowRoot.querySelectorAll（'.ought1'）；
}

.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;
}