Почему handleClick () не меняет стиль? - PullRequest
Новая
       21

Почему handleClick () не меняет стиль?

0 голосов
/ 25 апреля 2020

У меня проблема с компонентом 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;
}

1 Ответ

2 голосов
/ 26 апреля 2020

Вы определяете функцию 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');
}
...