JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="wrap_select" data-name="select1_name" data-value="1">
  <button class="btn_normal btn_select"></button>
  <ul class="list_type2 list_pixcel" style="display: none;">
    <li class="active" data-value="1" data-label="option1_label">
      <label>option1_label</label>
      <span class="state">활성</span>
    </li>
    <li class="inactive" data-value="2" data-label="option2_label">
      <label>option2_label</label>
      <span class="state">활성</span>
    </li>
  </ul>
</div>

JavaScript

var Select = (function(Select) {
  'use strict';
  var wrap, length;

  var open = function(_this) {
    if(!_this.active) {
      _this.option.css('display', 'block');
      _this.active = true;
    }
  };

  var close = function(_this) {
    if(_this.active) {
      _this.option.css('display', 'none');
      _this.active = false;
      $(window).off('click');
    }
  };

  var clickButton = function(_this) {
    var i = _this.options.length;
    if (!_this.active) {
      _this.open();
      while (i--) {
        _this.options.eq(i).one('click', function() {
          clickOption(_this, this);
        });
      }
    } else {
      _this.close();
    }
  };

  var buttonCtrl = function(_this) {
    if (_this.image) {
      _this.button.find('.label').text(_this.label);
    } else {
      _this.button.text(_this.label);
    }
    _this.button.find('.desc').text(_this.desc);
    _this.button.find('.txt').text(_this.desc);
    _this.button.find('img').attr('src', _this.image);
    if(_this.callback) {
      _this.callback(_this.value)
    }
  };

  var clickOption = function(_this, el) {
    var $this = $(el),
      result = false,
      parent = _this.parent;

    if (!$this.hasClass('on') && !$this.hasClass('disabled')) {
      $this.addClass('on');
      $this.siblings().removeClass('on');
      _this.label = $this.data('label');
      _this.value = $this.data('value');
      _this.image = $this.data('image');
      _this.desc = $this.data('desc');
      parent.attr('data-value',_this.value);
      buttonCtrl(_this);
      result = true;
    }
    return result;
  };

  var initial = function(_this) {
    var i = length;
    while (i--) {
      var parent = wrap.eq(i),
        name = parent.data('name'),
        label = parent.data('label'),
        value = parent.data('value'),
        image = parent.data('image'),
        desc = parent.data('desc');

      _this[ name ] = {};
      _this[ name ] = new _Select(label, value, image, desc);
      _this[ name...