如何在jQuery中的不同下拉列表中添加不同的前缀

Question

用户单击我的下拉列表中的菜单选项后，我希望顶部标签具有原始菜单标题，后跟冒号，以及他们刚刚单击的选项。

我正在使用此演示中的代码，可以很好地实现此效果： http : //tympanus.net/Tutorials/CustomDropDownListStyling/

但是，我想通过几个下拉菜单执行此操作，并尝试自定义演示代码。 这是我尝试过的：

HTML：

<section id="options" class="clearfix combo-filters">

    <div class="option-combo size">                     
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <span data-key="Size: ">Size</span>
      <ul class="dropdown option-set clearfix " data-filter-group="size"> 
        <li><a href="#filter-size-any" data-filter-value="" class="selected">Any</a>

          <li><a href="#filter-size-tiny" data-filter-value=".tiny">Tiny</a>

          <li><a href="#filter-size-small" data-filter-value=".small">Small</a>

          <li><a href="#filter-size-medium1" data-filter-value=".medium1">Medium</a>

          <li><a href="#filter-size-large" data-filter-value=".large">Large</a>

          <li><a href="#filter-size-giant" data-filter-value=".giant">Giant</a>

      </ul>
      </div>
    </div>


    <div class="option-combo hair">
              <div id="ee" class="wrapper-dropdown-3" tabindex="2">

      <span data-key="Hair:">Hair</span>
            <ul class="dropdown option-set clearfix " data-filter-group="hair"> 
        <li><a href="#filter-hair-any" data-filter-value="" class="selected">Any</a>

          <li><a href="#filter-hair-short" data-filter-value=".short">Short</a>

          <li><a href="#filter-hair-medium2" data-filter-value=".medium2">Medium</a>

          <li><a href="#filter-hair-long" data-filter-value=".long">Long</a>


      </ul>
      </div>
    </div>


    <div class="option-combo trainability">
              <div id="ff" class="wrapper-dropdown-3" tabindex="3">

      <span>Trainability</span>
      <ul class="dropdown option-set clearfix " data-filter-group="trainability"> 
        <li><a href="#filter-shape-any" data-filter-value="" class="selected">Any</a>

          <li><a href="#filter-trainability-easy" data-filter-value=".easy">Easy</a>

          <li><a href="#filter-trainability-average" data-filter-value=".average">Average</a>

          <li><a href="#filter-trainability-difficult" data-filter-value=".difficult">Difficult</a>

          <li><a href="#filter-trainability-vdifficult" data-filter-value=".vdifficult">Very Difficult</a>

      </ul>
      </div>
    </div>

jQuery的：

 jQuery(document).ready(function(){

/*   my code */

     var group="";

     if ($(this).find('span').data('key')==="size") {
         group="Size: ";
     }else if ($(this).find('span').data('key')==="hair")   {
      group="Hair: ";
      }

/* my code end */

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents: function () {

            var obj = this;

            obj.dd.on('click', function (event) {
                jQuery(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = jQuery(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(group + obj.val);
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    },
    jQuery(function () {
        var dd = new DropDown(jQuery('#dd'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

     jQuery(function () {
        var dd = new DropDown(jQuery('#ee'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

     jQuery(function () {
        var dd = new DropDown(jQuery('#ff'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

});

这是为此jsfiddle拼凑而成的JsFiddle

Answer 1

问题是您正在使用闭包变量来保存组。 由于每个下拉列表都有其打开键值，因此该组是一个实例值（不是共享值-因此您不应在此处使用闭包）。

在以下解决方案中，该组作为DropDown的实例属性添加，稍后在选择过程中使用

尝试这个

jQuery(function(){

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
        this.group = this.placeholder.data('key');
        this.group = this.group.charAt(0).toUpperCase() + this.group.substring(1) + ':';
    }
    DropDown.prototype = {
        initEvents: function () {
            var obj = this;

            obj.dd.on('click', function (event) {
                jQuery(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = jQuery(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.group + obj.val);
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    };

    new DropDown(jQuery('#dd'));
    new DropDown(jQuery('#ff'));
    new DropDown(jQuery('#ee'));

    jQuery(document).click(function () {
        // all dropdowns
        jQuery('.wrapper-dropdown-3').removeClass('active');
    });
});

演示： 小提琴