Javascript函数不适用于多个实例

Question

我是OO JavaScript的新手，并尝试编写一个插件，允许我创建多个＆＃34;漂亮的选择＆＃34;可以在...中格式化自定义html。

我遇到的问题是，当我在页面上添加多个实例时，会返回未定义或奇数值....

这是我的JS

function selectify(options) {
      var $elem = $(options.target),
          $button = $elem.find('button');
          open = false;

      function getVal() {
         return $elem.find('input:checked').val();
      }
      function setVal(val) {
        $elem.find('.active').removeClass('active');
        $elem.find('input[value="' + val + '"]').attr('checked','checked').parent().addClass('active');
      }
      function toggle() {
        if(open) {
            open = false;
            $elem.removeClass('open');
            $button.attr('aria-pressed','false');
        } else {
            open = true;
            //$elem.find('.active input').focus();
            $elem.addClass('open');
            $button.attr('aria-pressed','true');
        }
      }
      $button.attr('aria-pressed','false');
      $elem.find('input:checked').parent().addClass('active')
      $elem.find('label').click(function() {
        setVal($(this).find('input').val());
        if(open) toggle();
      });
      $button.click(function() {
        toggle();
      })

        $(window).on('keydown', function(e) {
            if(open) {
                switch(e.keyCode) {
                    case 40:
                        //down
                      if(!$elem.find('.active').is('label:last-child')) setVal($elem.find('.active').next('label').find('input').val());
                    break;
                    case 38:
                      //up
                      if($elem.find('.active').index()>1) setVal($elem.find('.active').prev('label').find('input').val());
                    break;
                    case 27:
                        toggle();
                    break;
                }
            }
        })

      return {
        getVal: getVal,
        setVal: setVal,
        open: open,
        toggle: toggle
      }
    }

    var x = new selectify({
      target:'.target2'
    });

    var y = new selectify({
      target:'.target'
    });

这是html

<fieldset class="selectify target">

<button aria-label="open select">▼</button>
    <!--legend>Donut Type</legend-->
<label>
          <input type="radio" value="1" name="flavour" />
        Red
</label>
<label>
          <input type="radio" value="2" name="flavour" checked="checked" />
        Blue
</label>
<label>
          <input type="radio" value="3" name="flavour" />
        Green
</label>
<label>
          <input type="radio" value="4" name="flavour" />
        Yellow
</label>
<label>
          <input type="radio" value="5" name="flavour" />
        Cat
</label>
</fieldset>

如果有帮助，我在CodePen上有一个工作示例吗？

http://codepen.io/ben-walters/pen/fbIya

先谢谢男女老少！