Enquire.js

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'), 
 
\t \t $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(); 
 
\t  
 
     // .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') 
 
    } 
 
    }) 
 
});