Пытаюсь собрать небольшой конструктор на jQuery. Есть секция выбора цвета. В этой секции выбирается два параметра: внешний цвет и внутренний. Делаю это с помощью списка, просто добавляя class="selected"
к элементу.
Второй, внешний цвет, под спойлером потому что их много.
jQuery(document).ready(function($) {
function ProductBuilder(element) {
this.element = element;
this.colors = this.element.children('.section-colors');
this.bindEvents(); // Событие связующего компоновщика
}
ProductBuilder.prototype.bindEvents = function() {
var self = this;
// Определяет клики на элементах кастомизации
this.colors.on('click', '.section-colors-customizer a', function(event) {
event.preventDefault();
self.customizeModel($(this));
});
this.colors.$('.spoiler-text').hide();
this.colors.on('click', '.spoiler', function(event) {
$(this).toggleClass('folded').toggleClass('unfolded').next().slideToggle();
});
}
ProductBuilder.prototype.customizeModel = function(target) {
var parent = target.parent('li')
index = parent.index();
target.parent('li').addClass('selected').siblings().removeClass('selected').end();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-colors">
<h2>Внутренний цвет</h2>
<ul class="section-colors-customizer" id="internal">
<li data-content="Белый" data-price="0" class="selected"><a data-color="white" href="#0">Белый</a></li>
<li data-content="Серый" data-price="1"><a data-color="703805" href="#0">Серый</a></li>
<li data-content="Чёрный" data-price="2"><a data-color="305405" href="#0">Чёрный</a></li>
...
</ul>
<h2>Внешний цвет</h2>
<div class="spoiler-wrapper">
<div class="spoiler folded"><span>Показать все цвета</span></div>
<div class="spoiler-text">
<ul class="section-colors-customizer" id="external">
<li data-content="Белый" data-price="0" class="selected"><a data-color="white" href="#0">Белый</a></li>
<li data-content="Серый" data-price="1"><a data-color="703805" href="#0">Серый</a></li>
<li data-content="Чёрный" data-price="2"><a data-color="305405" href="#0">Чёрный</a></li>
...
</ul>
</div>
</div>
</div>
Что только не пробовал, но ни переключатель, ни спойлер не работают. Наверняка ошибка где-то в переходах между функциями, но я никак не могу её найти.
Подскажите, пожалуйста, на ошибку.
Теперь работает спойлер и клики.
jQuery(document).ready(function($) {
console.log('Ready');
function ProductBuilder(element) {
this.element = element;
// children is not a function
this.colors = this.element.children; //('.section-colors');
this.bindEvents(); // Событие связующего компоновщика
}
ProductBuilder.prototype.bindEvents = function() {
var self = this;
// Определяет клики на элементах кастомизации
//this.colors <-- Error to call on()
$([].concat.apply([], this.colors)).on('click', '.section-colors-customizer a', function(event) {
event.preventDefault();
self.customizeModel($(this));
console.log('Clicked cutomizer');
});
//this.colors. <-- Error to call on()
$.each(this.colors, function(el) {
$(this).find('.spoiler-text').hide();
});
// this.colors
$([].concat.apply([], this.colors)).on('click', '.spoiler', function(event) {
$(this).toggleClass('folded').toggleClass('unfolded').next().slideToggle();
});
}
ProductBuilder.prototype.customizeModel = function(target) {
var parent = target.parent('li')
index = parent.index();
target.parent('li').addClass('selected').siblings().removeClass('selected').end();
}
//----------------------------------------------------------------
//Demo element
var el = document.querySelector('.section-colors');
var pb = new ProductBuilder(el);
});
.selected {
background: yellow;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div class="section-colors">
<h2>Внутренний цвет</h2>
<ul class="section-colors-customizer" id="internal">
<li data-content="Белый" data-price="0" class="selected"><a data-color="white" href="#0">Белый</a></li>
<li data-content="Серый" data-price="1"><a data-color="703805" href="#0">Серый</a></li>
<li data-content="Чёрный" data-price="2"><a data-color="305405" href="#0">Чёрный</a></li>
...
</ul>
<h2>Внешний цвет</h2>
<div class="spoiler-wrapper">
<div class="spoiler folded"><span>Показать все цвета</span></div>
<div class="spoiler-text">
<ul class="section-colors-customizer" id="external">
<li data-content="Белый" data-price="0" class="selected"><a data-color="white" href="#0">Белый</a></li>
<li data-content="Серый" data-price="1"><a data-color="703805" href="#0">Серый</a></li>
<li data-content="Чёрный" data-price="2"><a data-color="305405" href="#0">Чёрный</a></li>
...
</ul>
</div>
</div>
</div>
</div>
P.S.: На весь экран.
Фрилансер или Digital-агентство - Как сделать правильный выбор?
Товарищи, возник следующий вопрос: балуясь с рефлексией, можно из классов доставать методы, определяющие работу их операторов сложения, вычитания...
Пишу бота для телеграмДело в том, что после нескольких перезапусков, бот перестаёт получать ключи
Как работать со связями многие-ко-многим?