I'm trying to build a small constructor on jQuery. There is a color selection section. In this section, two parameters are selected: outer color and inner. I do this using a list by simply adding class="selected" to the item.

The second, the outer color, under the spoiler because they are many.

 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>

That just did not try, but neither the switch nor the spoiler does not work. Surely an error somewhere in the transitions between functions, but I just can not find it.

Please tell me the error.

    1 answer 1

    Now it works spoiler and clicks.

     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>

    PS: Full screen.

    • Thanks, the general idea and the mistakes I understood. I modified the code a bit so that the internal color also switched and it all worked. - I don't know how it happened