제목에 설명 된대로 페이지의 두 요소가 동일한 높이를 갖도록 일치하는 다음 코드가 있습니다.
//get sector sub navigation height
$(function() {
sectorHeight();
if(window.attachEvent) {
window.attachEvent('onresize', sectorHeight);
}
else if(window.addEventListener) {
window.addEventListener('resize', sectorHeight);
}
//get profile sub navigation height
profileHeight();
if(window.attachEvent) {
window.attachEvent('onresize', profileHeight);
}
else if(window.addEventListener) {
window.addEventListener('resize', profileHeight);
}
});
function sectorHeight() {
var secHeight = $('#sector-content').height();
$('.content-sub-nav').css('height', secHeight);
}
function profileHeight() {
var secHeight = $('.profile-article').height();
$('.mod-profile-search').css('height', secHeight);
}
이것은 현재 다른 요소를 사용하는 두 개의 다른 페이지에서 호출됩니다. 페이지로드와 크기 조정시 모두 호출되는 단일 함수 만 사용하도록 어떻게 편집 할 수 있습니까?
또는 다음 접근 방식을 사용할 수 있습니다.
function fixHeights(){
$('.js-same-height').each(function(){
var self = $(this);
var target = $(self.data('target'));
self.height(target.height());
});
}
동일한 페이지의 여러 다른 요소에 대해 작동해야합니다. 동적 요소에 "js-same-height"클래스와 "data-target =". css-selector ""속성을 제공합니다. 여기서 ".css-selector"는 복사하려는 요소에 대한 선택기입니다. 신장.
그리고 이것은 resize 이벤트에서 사용할 수있는 방법입니다.
$(window).on('resize', fixHeights);
또는:
$(window).on('resize', function(){
fixHeights();
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다