Показать сообщение отдельно
  #3 (permalink)  
Старый 08.06.2019, 13:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

создание селектора из массива
jobananada,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.product-sizes {
    border-bottom: 1px solid #bbb;
    text-align: center;
    padding-bottom: 13px;
    padding-top: 12px;
    margin-bottom: 13px;
}

.product-size.selected:hover {
    color: #fff;
}

.product-sizes span.selected {
    border: 1px solid #fa6f57;
    background: #fa6f57;
    color: #fff;
}
.product-sizes span.selected:hover {
    color: #fff;
}
.product-sizes span:hover {
    border: 1px solid #fa6f57;
    color: #fa6f57;
}
.product-sizes span{
    color: #1f1f1f;
    border: 1px solid #1f1f1f;
    font-size: 14px;
    width: auto;
    line-height: 30px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 0 4px;
    min-width: 32px;
    cursor: pointer;
}
  </style>

  <script>
  class ShowSize {
      constructor(arr, cls){
          this.arr = arr;
          this.cls = cls;
          this.length = arr.length;
          this.current = 0;
          this.parent = document.querySelector(cls);
          this.spans = this.createElems(this.length, "span");
          this.spans.forEach((el,i) => {
             el.textContent = arr[i].toUpperCase();
             el.dataset.index = i;
          })
          this.parent.append(...this.spans);
          this.select  = this.createElems(1, "select")[0];
          this.select.name="size";
          this.options = this.createElems(this.length, "option");
          this.options.forEach((el,i) => {
             el.textContent = arr[i].toUpperCase();
             el.value = arr[i];
          })
          this.select.append(...this.options);
          this.parent.append(this.select);
          this.parent.addEventListener("pointerdown", this.eventHandler.bind(this));
          this.parent.addEventListener("pointerup", this.eventHandler.bind(this));
          this.setIndex(0)
      }
      createElems(length, tagName) {
        let elems = Array.from({length}, (v,k) => document.createElement(tagName));
        return elems
      }
      setIndex(index){
          this.spans[this.current].classList.remove("selected");
          this.spans[index].classList.add("selected");
          this.select.value = this.arr[index];
          this.current = index;
      }
      eventHandler({target, type}) {
        if(type == "pointerdown" && target.closest(this.cls + ">span")){
            const index =  target.dataset.index;
            this.setIndex(index)
        }
        else if(type == "pointerup" && target == this.select) {
            const index = this.arr.indexOf(target.value) ;
            this.setIndex(index)
        }
      }

  }
 let mass= ["s","l","x","xl","xxl"];
 document.addEventListener("DOMContentLoaded", function(){
     new ShowSize(mass, ".product-sizes")
 })
  </script>
</head>

<body>
<div class="product-sizes"></div>

</body>
</html>
Ответить с цитированием