0

这是我的代码：http ://codepen.io/kikibres/pen/mVYOaR

我正在尝试重新编码选择选项以在选择时显示“X”按钮，当单击“X”按钮时，它会重置回原始选择值。此外，我希望“x”按钮只能在他们自己的下拉菜单上工作，而不是在所有下拉菜单上工作。

我试图让它更类似于http://www.mtommaneycentre.com.au/stores/。如您所见，当您单击“AZ”选择字段中的选项时，会出现一个“X”按钮，当您单击“X”按钮时，它会重置为原始的“AZ”选择选项……。

如何做到这一点？

HTML

<div class="filtermenu">
<form class="controls" id="Filters">

  <fieldset class="select-style">

    <select>
      <option value="">All</option>
      <option value=".triangle">Triangle</option>
      <option value=".square">Square</option>
      <option value=".circle">Circle</option>
    </select>
    <button class="btn-clear">x</button>
  </fieldset>

  <fieldset class="select-style">

    <select>
      <option value="">All</option>
      <option value=".blue">Blue</option>
      <option value=".white">White</option>
      <option value=".green">Green</option>
    </select>
    <button class="btn-clear">x</button>
  </fieldset>


    <fieldset>
  <button class="filter" data-filter=".triangle">Triangle</button>
  </fieldset>

  <fieldset>
    <input type="text" placeholder="Enter Name" val="" data-filter="" id="filter--text" />
  </fieldset>

  <button id="Reset">Clear Filters</button>
</form>
</div>

Javascript 重置所有选项的代码是

self.$reset.on('click', function(e){ e.preventDefault();

在

var dropdownFilter = {

  // Declare any variables we will need as properties of the object

  $filters: null,
  $reset: null,
  groups: [],
  outputArray: [],
  outputString: '',

  // The "init" method will run on document ready and cache any jQuery objects we will need.

  init: function(){
    var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "dropdownFilter" object so that we can share methods and properties between all parts of the object.

    self.$filters = $('#Filters');
    self.$reset = $('#Reset');
    self.$container = $('#Container');

    self.$filters.find('fieldset').each(function(){
      var $this = $(this);

      self.groups.push({
        $buttons : $this.find('.filter'),
                $inputsSelect : $this.find('select'),
                $inputsText : $this.find('input[type="text"]'),
                active : ''
            });
        });

    self.bindHandlers();
  },


  // The "bindHandlers" method will listen for whenever a select is changed. 

  bindHandlers: function(){
    var self = this;

    // Handle select change

 self.$filters.on('click', '.filter', function(e){
      e.preventDefault();

      var $button = $(this);

      // If the button is active, remove the active class, else make active and deactivate others.

      $button.hasClass('active') ?
        $button.removeClass('active') :
        $button.addClass('active').siblings('.filter').removeClass('active');

      self.parseFilters();
    });

    // Handle dropdown change

    self.$filters.on('change', function(){
      self.parseFilters();           
    });

     // Handle key up on inputs
        self.$filters.on('keyup', 'input[type="text"]', function() {

            var $input = $(this);
            console.log($input.val());            
            $input.attr('data-filter', '[class*="'+$input.val().replace(/ /, '-')+'"]');
            if ($input.val() == '')
              $input.attr('data-filter', '');
            console.log($input.attr('data-filter'));
            self.parseFilters();

        });

    // Handle reset click

    self.$reset.on('click', function(e){
      e.preventDefault();

      self.$filters.find('.filter').removeClass('active');
      self.$filters.find('.show-all').addClass('active');
      self.$filters.find('select').val('');

self.$filters.find('input[type="text"]').val('').attr('data-filter', '');

      self.parseFilters();
    });
  },

  // The parseFilters method pulls the value of each active select option

  parseFilters: function(){
    var self = this;

    // loop through each filter group and grap the value from each one.

    for(var i = 0, group; group = self.groups[i]; i++){

          var activeButtons = group.$buttons.length ? group.$buttons.filter('.active').attr('data-filter') || '' : '';            
          var activeSelect = group.$inputsSelect.length ? group.$inputsSelect.val()  || '' : '';
          var activeText = group.$inputsText.length ? group.$inputsText.attr('data-filter') : ''; 

          group.active = activeButtons+activeSelect+activeText;

          console.log(group.active);
        } 

        self.concatenate();

    },

  // The "concatenate" method will crawl through each group, concatenating filters as desired:

  concatenate: function(){
    var self = this;

    self.outputString = ''; // Reset output string

    for(var i = 0, group; group = self.groups[i]; i++){
      self.outputString += group.active;
    }

    // If the output string is empty, show all rather than none:

    !self.outputString.length && (self.outputString = 'all'); 

    console.log(self.outputString); 

    // ^ we can check the console here to take a look at the filter string that is produced

    // Send the output string to MixItUp via the 'filter' method:

      if(self.$container.mixItUp('isLoaded')){
        self.$container.mixItUp('filter', self.outputString);
      }
  }
};

// On document ready, initialise our code.

$(function(){

  // Initialize dropdownFilter code

  dropdownFilter.init();

  // Instantiate MixItUp

  $('#Container').mixItUp({
    controls: {
      enable: false // we won't be needing these
    },
    callbacks: {
      onMixFail: function(){
        alert('No items were found matching the selected filters.');
      }
    }
  });    
});
4

1 回答 1

0

目前没有为您的“x”按钮附加任何事件处理程序，因此如果您单击它们，它只会刷新页面，这就是它重置所有过滤器的原因，因为它会重新初始化所有代码。

您应该将此代码添加到您的插件中

$('.btn-clear').on('click', function(event) {
    event.preventDefault();
    $(this).prev().val("").change();
});

当event.preventDefault()您单击按钮时，将阻止运行默认事件，在这种情况下是刷新页面。

下一行将指向单击元素的前一个 DOM 元素（即<select>）并更改为具有值的选项：“”，并在触发 change() 事件后告诉您编写的代码选择的值已更改，因此应使用新过滤器重新加载图形。

我把它保存在这里：http ://codepen.io/anon/pen/EPzWEQ?editors=1010 当然你应该将它实现到你的插件中，我只是将它写到代码的底部以使其工作。

编辑： 如果您想在没有选择过滤器的情况下使 X 按钮不可见，只需在选择上创建一个“更改”事件处理程序，并检查值是否为“”，然后隐藏按钮，否则显示它。它应该是这样的：

$('select').change(function() {
    if ($(this).val() == "") { 
        $(this).next().hide();
    } else { 
        $(this).next().show();
    } 
});
于 2016-02-19T01:49:07.390 回答