Форум

jobananada · #1 (**permalink**) 07.06.2019, 23:25

<script>
let mass= [s,l,x,xl,xxl];

for(){
<div class="product-sizes">
	<span class="product-size selected" data-product-size="s">S</span>
	<span class="product-size" data-product-size="m">M</span>
	<span class="product-size" data-product-size="l">L</span>
	
	<select id="ProductSize" name="size" size="1">
		<option value="s">S</option>
		<option value="m">M</option>
		<option value="l">L</option>
	</select>
</div>
}
</script>

https://jsfiddle.net/BaNru/0z72a91u/3/ вот вариант без цикла

jobananada · #2 (**permalink**) 07.06.2019, 23:30

По умолчанию выделен 0 левой элемент массива

рони · #3 (**permalink**) 08.06.2019, 13:29

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>

Malleys · #4 (**permalink**) 11.06.2019, 00:32

рони, почему <span> вместо <button>? (Или почему вы разрешили выбирать кнопки только при помощи мыши?)

Почему события "pointerdown" и "pointerup", а не "click" и "input"? (Или почему можно только на сенсорном экране и при помощи мыши?)

рони · #5 (**permalink**) 11.06.2019, 00:41

Malleys,
напишите, пожалуйста, как надо, в моих знаниях пробел, я не могу ответить на ваши вопросы.

Malleys · #6 (**permalink**) 11.06.2019, 01:41

Какой пробел? Так сложно одно заменить на другое... Вот поменял в вашем коде https://jsfiddle.net/vefs7x13/

И ещё добавил HTML API, наверное <product-sizes data-values="s l x xl xxl"></product-sizes> всё-таки удобней...

рони · #7 (**permalink**) 11.06.2019, 10:46

Сообщение от Malleys

Так сложно одно заменить на другое...

гмм ... заменить не сложно, но я по-прежнему не могу ответить на ваши вопросы, почему span, почему не клик.
спасибо за код!

рони · #8 (**permalink**) 11.06.2019, 10:49

Malleys,
как сделать правильный выбор события или элемента? почему input, а не change в данном случае?

Malleys · #9 (**permalink**) 11.06.2019, 12:21

Элемент <span> сам по себе ничего не значит, но может быть полезен, когда используется вместе с глобальными атрибутами, например, class, lang, или dir. Он представляет из себя его содержимое. (https://www.w3.org/TR/html52/textlev...e-span-element)

Элемент <button> представляет из себя элемент управления, позволяющий пользователю запустить некое действие. (https://www.w3.org/TR/html52/sec-for...button-element)

Вы хотите изменять размер одежды, это действие, а значит оно запускается кнопкой.

События input и change действуют на элемент типа HTMLSelectElement одинаково, поскольку для этого элемента событие change происходит сразу после изменения, а не тогда, когда элемент теряет фокус.

Обязательно для прочтения... https://karlgroves.com/2013/05/14/li...divs-and-spans

рони · #10 (**permalink**) 11.06.2019, 14:29

Сообщение от Malleys

Обязательно для прочтения...

Благодарю!

Форум

Справочник

Discord чат

Курсы javascript