标签: mixitup

我在JS中不够先进,无法完全发挥作用.

我有两个带选项的选择字段:

    <select name="" id="filter-position">
      <option value="all">Filter by position</option>
      <option value=".instructor">Instructor</option>
      <option value=".leader">Leader</option>
      <option value=".blah">Blah</option>
      <option value=".whatever">Whatever</option>
    </select>

    <select name="" id="filter-location">
      <option value="all">Filter by position</option>
      <option value=".portland">Portland</option>
      <option value=".missoula">Missoula</option>
      <option value=".chicago">Chicago</option>
      <option value=".newyork">New York</option>
    </select>

过滤后的项目所在的容器看起来有点像这样:

    <ul id="filter-container">
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
    </ul>

我可以让每个人正确过滤但不能一起过滤(即AND).我正在使用的JS代码是这样的:

  $(function(){
    var $positionSelect = $('#filter-position'),
        $locationSelect = $('#filter-location'),
        $container = $('#filter-container');

    $container.mixItUp({});

    $positionSelect.on('change', function(){
      $container.mixItUp('filter', this.value);
    });

    $locationSelect.on('change', function(){
      $container.mixItUp('filter', this.value);
    });
  });

如果我按一个选择过滤,则事情会正确过滤.如果我然后通过另一个过滤,它将覆盖第一个过滤器.我想要的是他们两个都被使用.

我知道有一种方法可以让它工作,但我不知道如何使用连接字符串来执行"和"逻辑,如文档的高级过滤部分中所述<select> …

我在ExpressionEngine 站点上使用 Mixitup ( https://mixitup.kunkalabs.com ) 实用程序。该页面是房地产属性列表，Mixitup 过滤器用于按地区、特征等缩小这些属性的范围。

我希望能够通过 url_segment 传递一些值来触发过滤器。因此，例如，如果用户单击划分为不同市场的地图中的列表，他们将首先只看到这些市场中的房产，就好像他们是从主页上选择的一样。

例如，默认视图是这样的：

如果他们点击印第安纳州中部，其他地区就会消失，并会打开一个子市场菜单：

如果他们进一步单击 South，则仅显示该子市场中的属性。他们可以随时取消选择这些选项，并显示隐藏的属性。

我想要做的是让用户能够访问该页面并选择一些选项：

在进行了所有其他调用之后，我尝试使用 javascript 来单击元素：

<script>
     $(document).ready(function(e){
          setTimeout(function() {
               $("li.central-indiana").click();
          },10);
     });
</script>

这扩展了菜单，但没有过滤属性（或应用“活动”类，但这并不是真正的问题）。

我还尝试在页面末尾使用 Mixitup 的 showOnLoad 函数，并使用延迟计时器：

<script type="text/javascript">
    $("document").ready(function() {
        setTimeout(function() {
             $('#filter').mixitup(
                {'showOnLoad': 'central-indiana'}
             ); 
        },10);   
    });
</script>

这暂时过滤了属性，但随后 mixitup 重置了自身，并将它们全部显示出来。它也没有扩展菜单或应用“活动”类。

我在这里缺少什么？

谢谢，

泰

我正在使用jQuery - MixItUp组合插件.

如何可以显示默认选项卡的内容为" Icon Tab" 相关的内容,而不是" All"

Tab Active在内容不变的情况下正常工作......

在线演示

jQuery的

$(function () {

  var filterList = {

    init: function () {

      // MixItUp plugin
      // http://mixitup.io
      $('#portfoliolist').mixitup({
        targetSelector: '.portfolio',
        filterSelector: '.filter',
        effects: ['fade'],
        easing: 'snap',
        // call the hover effect
        onMixEnd: filterList.hoverEffect()
      });               

    },

    hoverEffect: function () {

      // Simple parallax effect
      $('#portfoliolist .portfolio').hover(
        function () {
          $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
          $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');               
        },
        function () {
          $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad'); …