元素数组中的Enquire.js (javascript)

Question

所讨论的代码如下：https://jsfiddle.net/ozeasa8t/

目标是通过缓存元素数组对每个()进行访问，以便在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')
    }
  })
});

​