jquery expand collapse efficiency

Question

방금 ​​웹 사이트에서 간단한 확장/축소 시스템을 구현했습니다. 나는 몇 가지 기존 솔루션을 시도했지만, 사이트에 적응하기 위해 너무 많은 노력을 기울 였으므로 필자는 필자 자신의 것을 썼다.

코드는 다음과 같습니다 :

는

function hide(boxtohide, boxtomodify, expandbox) { 

$('#' + boxtohide).hide(300); 
$('#' + boxtomodify).css('background-image', 'url("images/new/date.png")'); 
$('#' + boxtomodify).css('height', '69px'); 
$('#' + expandbox).show(300); 

} 

function show(boxtohide, boxtomodify, expandbox, origheight, origurl) { 
$('#' + expandbox).hide(300); 
$('#' + boxtomodify).css('height', origheight); 
$('#' + boxtomodify).css('background-image', 'url("'+origurl+'")'); 
$('#' + boxtohide).show(300); 


} 

논리 뒤에 이것이다 :

• 사용자가 클릭
• 내용은 래퍼가 얇은 사업부로 대체
• 내용 숨겨져 숨기기
• 내용 래퍼에 표시된 단추를 확장합니다 (즉, 원래 내용을 바꿉니다).

그리고 다시 확대하기위한 역상.

내게는 코드가 조금 복잡해 보입니다. 자바 스크립트 위저즈가 아니기 때문에 여기에 약간의 제안이 있으면 환영받을 것입니다.

데이브

이

Answer 1

내가 좋을 것 유일한 명백한 변화로 압축 할 수 $('#' + boxtomodify') 라인이다 :

function hide(boxtohide, boxtomodify, expandbox) { 
    $('#' + boxtohide).hide(300); 
    $('#' + boxtomodify).css({ 
     'background-image' : 'url("images/new/date.png")'), 
     'height' : '69px' }); 
    $('#' + expandbox).show(300); 
} 

function show(boxtohide, boxtomodify, expandbox, origheight, origurl) { 
    $('#' + expandbox).hide(300); 
    $('#' + boxtomodify).css({ 
     'height' : origheight 
     'background-image' : 'url("'+origurl+'")' }); 
    $('#' + boxtohide).show(300); 
} 

Answer 2

당신은 단순히 JS 먼저 각 요소를 얻는 코드를 속도를 수 있고, 다음과 같이 그 CSS 수정 체인 :

function hide(boxtohide, boxtomodify, expandbox) { 

var hideElem = document.getElementById(boxtohide), 
    modElem = document.getElementById(boxtomodify), 
    expandElem = document.getElementById(expandbox), 
    cssObj = { 'background-image' : 'url("images/new/date.png")', 
       'height' : '69px' }; 

$(hideElem).hide(300); 
$(modElem).css(cssObj); 
$(expandElem).show(300); 

} 

Answer 3

난 당신이 jQuery를 사용하면 최소한의 코드와 같은 일을 할 수있다, 너무 복잡 이런 식으로 접근하고 내기, 예를 들면 :

jsfiddle

$('.toggle').on('click', 'h3', function() { 
    var $content = $(this).next('.content'); 
    $content.slideToggle('fast'); 
});