Enquire.js 元素数组 (javascript)

Question

有问题的代码在这里：https://jsfiddle.net/ozeasa8t/

Objective 是通过缓存元素数组对 each() 进行的，目的是在 enquire.js 驱动的 js.

内部创建切换效果

我遇到了左右错误，希望您能提供意见。谢谢！

// I'm separating block A and B in declaration because the cached elements are used for other things
var $blockA = $('.block-a'),
  $blockB = $('.block-b');

// Creating array
var blockArray = [$blockA,$blockB];

var handler = function(el) {
  el.find('.block-content').toggle();
  el.closest('.wrapper').toggleClass('open');
};

blockArray.each(function() {
  enquire.register('screen and (max-width:1023px)', {
    match: function() {
    
      // Wrap each block in a .wrapper 
      $(this).wrap('<div class="wrapper"></div>');
      
      // .block-content should be hidden initially
      $(this).find('.block-content').hide();
     
      // .block-title will toggle its sibling .block-content
      $(this).find('.block-title').bind( "click", handler($(this)));

    },
    unmatch: function() {
    
      // Unwrap .wrapper
      $(this).unwrap();

      // Unbind so we don't end up with toggling block in desktop
      $(this).find('.block-title').unbind( "click", handler($(this)));
    }
  })
});

.block {
  margin:20px;
  background:#fff;
  border:1px solid black; 
  font:14px sans-serif;
  }
.block .block-title {
  background:#f4f4f4;
  padding:10px 15px;
  font-weight:bold;
  }
.block .block-content {
  padding:10px 15px;
  }

<div class="block-a block">
   <div class="block-title">
     Block A TItle
   </div>
   <div class="block-content">
     Bluh Bluh
   </div>
</div>
<div class="block-b block">
   <div class="block-title">
     Block B TItle
   </div>
   <div class="block-content">
     Bluh Bluh
   </div>
</div>

Answer 1

这是有效的 js 更新。

var handler = function($el) {
  $el.find('.block-content').toggle();
  $el.closest('.wrapper').toggleClass('open');
};e

$('.block').each(function() {
  var $el = $(this);
  enquire.register('screen and (min-width:768px)', {
    match: function() {
      $el.wrap('<div class="wrapper"></div>');
      $el.find('.block-content').hide();
      $el.find('.block-title').bind( "click", function() { handler($el); });

    },
    unmatch: function() {
      $el.unwrap();
      $el.find('.block-title').unbind( "click");
      $el.find('.block-content').show();
      $el.closest('.wrapper').removeClass('open')
    }
  })
});

Enquire.js 元素数组 (javascript)

Enquire.js in element array (javascript)

jquery

enquire.js