Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2019, 23:25
Аспирант
Отправить личное сообщение для jobananada Посмотреть профиль Найти все сообщения от jobananada
 
Регистрация: 03.02.2019
Сообщений: 66

как в цыкле вывести массив в html и сделать selected его нулевой eлемент с помощью js
<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/ вот вариант без цикла
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2019, 23:30
Аспирант
Отправить личное сообщение для jobananada Посмотреть профиль Найти все сообщения от jobananada
 
Регистрация: 03.02.2019
Сообщений: 66

По умолчанию выделен 0 левой элемент массива
Ответить с цитированием
  #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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.06.2019, 00:32
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

Почему события "pointerdown" и "pointerup", а не "click" и "input"? (Или почему можно только на сенсорном экране и при помощи мыши?)
Ответить с цитированием
  #5 (permalink)  
Старый 11.06.2019, 00:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Malleys,
напишите, пожалуйста, как надо, в моих знаниях пробел, я не могу ответить на ваши вопросы.
Ответить с цитированием
  #6 (permalink)  
Старый 11.06.2019, 01:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

И ещё добавил HTML API, наверное <product-sizes data-values="s l x xl xxl"></product-sizes> всё-таки удобней...
Ответить с цитированием
  #7 (permalink)  
Старый 11.06.2019, 10:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Malleys
Так сложно одно заменить на другое...
гмм ... заменить не сложно, но я по-прежнему не могу ответить на ваши вопросы, почему span, почему не клик.
спасибо за код!
Ответить с цитированием
  #8 (permalink)  
Старый 11.06.2019, 10:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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

Последний раз редактировалось рони, 11.06.2019 в 11:00.
Ответить с цитированием
  #9 (permalink)  
Старый 11.06.2019, 12:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Элемент <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

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

Сообщение от Malleys
Обязательно для прочтения...
Благодарю!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как из js передать параметр в html wins Общие вопросы Javascript 6 22.12.2013 15:56
нужно js сделать с тайм аутом в 15 часов и склеить его с html кодом stewie6630 Работа 2 20.10.2013 21:49
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
JS AJAX Как получить html страницы "глазами" другого пользователя kolyanok AJAX и COMET 11 18.05.2013 23:00
Как вытащить сведения из другой страницы с помощью js? makregistr Общие вопросы Javascript 6 28.12.2010 14:07