النظائر مسج إضافة فئة مخصصة والاعتماد تصفية العناصر

StackOverflow https://stackoverflow.com//questions/11690469

  •  12-12-2019
  •  | 
  •  

سؤال

كيف يمكنني إضافة فئة مخصصة لهذا مسج النظائر تصفية والاعتماد على تصفية العناصر من النظائر:

    $(function(){
var $container = $('#wrap-planspiel'),
      filters = {};

  $container.isotope({
        animationEngine : 'css',
        itemSelector : '.hexblock'
  });

  // filter buttons
  $('select').change(function(){
    var $this = $(this);

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $this.attr('data-filter-group');

    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    console.log(filters);
    var selector = isoFilters.join('');
    $container.isotope({ filter: selector });
    return false;
  });

      $('.filter a').click(function() {
          var $this = $(this);
          if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
          var group = $this.parent().data('filter-group');
          filters[ group ] = $this.data('filter-value');
          var isoFilters = [];
            for ( var prop in filters ) {
              isoFilters.push( filters[ prop ] )
            }
            console.log(filters);
            var selector = isoFilters.join('');
            $container.isotope({ filter: selector });
            return false;
      });      

});

هناك على سبيل المثال من desandro ولكن لا تزال فئة بعد الإعادة جميع المرشحات: http://jsfiddle.net/desandro/3nY9V/

هل كانت مفيدة؟

المحلول

حسنا, آسف على فهم بطيء جدا جدا الآن في Chrome devtools.لذلك:

  1. على تحميل الصفحة الخاصة بك (رمل أو الكمان) لأول مرة كل 28 النظائر البنود المبينة ؛ العنصر ، على سبيل المثال ، "برودكت-عنصر flutlicht w-100w أبيض دافئ النظائر-البند" الطبقات, ولكن لا عنصر "هو تصفية" الدرجة, لأنه لا تصفية اتخذت حتى الآن
  2. ثم واحد يختار ، على سبيل المثال ، Flutlicht في القائمة المنسدلة
  3. الآن البند أيضا "هو تصفية" الدرجة المضافة إلى الطبقات السابقة
  4. ثم واحد يختار Alle Leuchtenarten من القائمة المنسدلة
  5. الآن تبدو مثل صفحة في 1. لكن هذا البند لا يزال لديه "هو تصفية" الطبقة

حسنا, هذا لا يأتي بمثابة مفاجأة لأن الآن أنت دائما داخل وظيفة مرشح, لذلك كل العناصر هي في الواقع تصفيتها ولكن تصفيتها على Alle Leuchtenarten و Alle Lichtfarben و Alle Leistungen, هذا هو السبب في كل 28 يتم عرض العناصر كما لو الصفحة الخاصة بك فقط تحميل للمرة الأولى :) ولكن لماذا تقلق بشأن ذلك ؟ ترى ما أعنيه ؟

رصدت آخر المسألة:عندما واحد هل سبق لك في بعض الأحيان يكون الفجوات بين العناصر في المربع الخاص بك عندما تعود إلى عرض جميع البنود 28.تحتاج الدعوة إلى reLayout في مكان ما أو لديك إلى الاعتماد على المشاهد لتغيير حجم النافذة إلى ركلة تخطيط التعبئة الآلية.

نصائح أخرى

يمكنك ببساطة حساب العناصر المصفاة مثل http://jsfiddle.net/3ny9v/1/0>

وجدت فقط أن هذا المثال بالضبط (عد العناصر المرئية) يتم تقديمه في isotope docs .

giveacodicetagpre.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top