Question

我这里有一个codepen - http://codepen.io/ashconnolly/pen/EjMbQp

function homepanelHeights() {
    $('.img_panel').each(function() {
        if (currentWidth < 700) {
            var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
            console.log(panelcopyHeight);
            $(this).css('height', panelcopyHeight);
        } else {
            // remove inline style
            $(this).css("height", "");
        }
    });
}
$(document).ready(function() {
    $('.img_panel').each(homepanelHeights);
});
$(window).resize(function() {
    $('.img_panel').each(homepanelHeights);
});

我想用.img_panel将函数应用于每个元素。你知道为什么每个函数调用都不起作用吗？我假设它是因为我传递的论据，但无法解决它。

如果我只是重复doc.ready和window.resize中的函数，它就有效，但这有点脏..

希望你能帮忙！

Answer 1

您只需要致电homepanelHeights();因为当您在$('.img_panel').each(...)中使用homepanelHeights时，您已经在迭代它$('.img_panel').each(homepanelHeights);，并与内部逻辑相结合该功能，可以视为：

// This is the outer    
$('.img_panel').each(function() {
    // This is inside your homepanelHeights
    $('.img_panel').each(function() {
       // Do something.
    });
});

所以你可以看到逻辑n*n times。

currentWidth是undefined。添加了一个假的显示。

＆＃13;

function homepanelHeights(){
$('.img_panel').each(function (){
    // VVVV Make the `currentWidth` get value here, it needs the current width
    // when window content is fully loaded, or resized.
    var currentWidth = $(window).width();
	if (currentWidth < 700){	
		var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
		console.log(panelcopyHeight);
		$(this).css('height', panelcopyHeight);
			} else {
			// remove inline style
		$(this).css("height", "");
	}
});
}

// As A. Wolff  said :
// $(window).on('load resize', homepanelHeights);  Can simplify the code.
$(document).ready(function() {
  homepanelHeights();
});
$(window).resize(function() {
  homepanelHeights();
});

＆＃13;

.img_panel {background:salmon; width:200px; height:300px; margin-bottom:10px; display:table;
	.panel_copy_inner {height:100%;     display: table-cell; vertical-align:middle; text-align: center;}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="img_panel">
	<div class="panel_copy_inner">Test</div>
</div>
<div class="img_panel">
	<div class="panel_copy_inner">Test</div>
</div>
<div class="img_panel">
	<div class="panel_copy_inner">Test</div>
</div>

＆＃13;

如果您想将homepanelHeights功能用作$('.img_panel').each(homepanelHeights);

您可以将逻辑重写为：

var currentWidth;
// You need to either define a `currentWidth` here by something.
function homepanelHeights(){
    if (currentWidth < 700){    
        var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
        console.log(panelcopyHeight);
        $(this).css('height', panelcopyHeight);
            } else {
            // remove inline style
        $(this).css("height", "");
    }
}

// As A. Wolff  said :

$(window).on('load resize', function() {
    // Update the width here. So you don't need to get currentWidth 
    // each time you operate on an element.
    currentWidth = $(window).width();
    $('.img_panel').each(homepanelHeights);
});

演示在jsfiddle。

Answer 2

     function homepanelHeights(){
            //This will iterate through all element having img_panel class
            $('.img_panel').each(function(){
                 //get current div's height
                 var currentWidth = //assign some value here, it is undefined in your current code;
                 // your logic implemetation
                 if (currentWidth < 700)
                 {  
                    var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
                    console.log(panelcopyHeight);
                    $(this).css('height', panelcopyHeight);
                 } 
                else {
                  $(this).css("height", "");
                }
            })
        }
        // on window load && resize 
        $(window).on('load resize',function() {
          homepanelHeights(); 
        });
//Or instead of window on load you can also use document's ready event
        $(document).ready(function() {
          homepanelHeights(); 
        });


document.ready runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content. 

window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded. So, if you're using image dimensions for example, you often want to use this instead

Answer 3

这里我修改了代码以实现每个元素的功能。请参阅下面的代码。

homepanelHeights=function(key, val) {

var currentWidth = $(window).width();
console.log(currentWidth);
        if (currentWidth < 700) {
            var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
            //console.log(panelcopyHeight);
            $(this).css('height', panelcopyHeight);
        } else {
            // remove inline style
            $(this).css("height", "");
        }

}

/**/
$(document).ready(function() {    

$('.img_panel').each(homepanelHeights); 

});

$(window).resize(function() {
   $('.img_panel').each(homepanelHeights);
});

使用$（'。class'）调用函数。each（functionName）;

3 个答案: