как в цыкле вывести массив в 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/ вот вариант без цикла
|
По умолчанию выделен 0 левой элемент массива
|
создание селектора из массива
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>
|
рони, почему <span> вместо <button>? (Или почему вы разрешили выбирать кнопки только при помощи мыши?)
Почему события "pointerdown" и "pointerup", а не "click" и "input"? (Или почему можно только на сенсорном экране и при помощи мыши?) |
Malleys,
напишите, пожалуйста, как надо, в моих знаниях пробел, я не могу ответить на ваши вопросы. |
Какой пробел? Так сложно одно заменить на другое... Вот поменял в вашем коде https://jsfiddle.net/vefs7x13/
И ещё добавил HTML API, наверное <product-sizes data-values="s l x xl xxl"></product-sizes> всё-таки удобней... |
Цитата:
спасибо за код! |
Malleys,
как сделать правильный выбор события или элемента? почему input, а не change в данном случае? |
Элемент <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 |
Цитата:
|
| Часовой пояс GMT +3, время: 19:36. |