Переключатель с выбором цвета на jQuery

235
06 июля 2018, 09:10

Пытаюсь собрать небольшой конструктор на 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>

Что только не пробовал, но ни переключатель, ни спойлер не работают. Наверняка ошибка где-то в переходах между функциями, но я никак не могу её найти.

Подскажите, пожалуйста, на ошибку.

Answer 1

Теперь работает спойлер и клики.

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.: На весь экран.

READ ALSO
Каким образом определены операторы у System.Int32 и прочих?

Каким образом определены операторы у System.Int32 и прочих?

Товарищи, возник следующий вопрос: балуясь с рефлексией, можно из классов доставать методы, определяющие работу их операторов сложения, вычитания...

164
Написание бота для Телеграм

Написание бота для Телеграм

Пишу бота для телеграмДело в том, что после нескольких перезапусков, бот перестаёт получать ключи

200
Получение данных при связи Многие ко многим

Получение данных при связи Многие ко многим

Есть 2 моделиМежду ними связь многие ко многим

176
Как работать со связями многие-ко-многим, используя LINQ?

Как работать со связями многие-ко-многим, используя LINQ?

Как работать со связями многие-ко-многим?

194