Question

我的Stencil.js组件有问题。我想用两个按钮制作一个图像滑块。单击第一个按钮时，img的索引为-1。单击第二个按钮时，它变为+1。我尝试使用clickHandler更改CSS。 img的当前显示设置为“无”。如果我单击它，应更改为阻止或类似的内容。但它说“找不到样式”。我想念某事吗？

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

您正在vorIndex方法中定义handleClick函数，但是您永远不会调用它。每次处理程序运行时，您还将imgIndex设置为1。您可能想将索引存储为类成员。

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

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

@Element() host;

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

为什么handleClick（）不更改样式？

1 个答案: