버튼을위한 함수를 작성하는 더 효율적인 방법

jquery를 처음 사용하므로이 질문이 어리석은 것처럼 보이면 실례합니다. 비슷한 기능이지만 정확하지는 않은 20 개의 버튼이있는 웹 사이트가 있습니다. 필자는 각 버튼에 대해 별도의 기능을 작성하려고 계획했지만보다 쉽고 효율적인 방법이 있는지 궁금해하고있었습니다. 여기 내 버튼 2입니다 :버튼을위한 함수를 작성하는 더 효율적인 방법

$('#architect').hover (function() { 
    $('.blank').addClass('txtarchitect'); 
    $('.bates,.han').addClass('over'); 
    }, 
    function(){ 
    $('.blank').removeClass('txtarchitect'); 
    $('.bates,.han').removeClass('over'); 
    } 
); 
}); 

$('#educator').hover (function() { 
    $('.blank').addClass('txteducator'); 
    $('.lee,.gorman').addClass('over'); 
    }, 
    function(){ 
    $('.blank').removeClass('txteducator'); 
    $('.lee,.gorman').removeClass('over'); 
    } 
); 
});

어떤 조언을 주셔서 감사합니다, 고마워!

출처

2012-04-02 peachorama

당신도 어떤 필요하십니까 다음 class1 변수가 항상 "TXT"플러스 요소의 ID가됩니다 떴다되는 경우, 대신 제공의이 버전에 button() 함수에서 class1 라인을 변경할 수 있습니다 이것에 대한 자바 스크립트는 무엇입니까? CSS': hover' 선택자로 원하는 것을 성취 할 수 없습니까? – gilly3

@ gilly3 요소 A 위로 마우스를 가져 가면 CSS가 요소 B에 클래스를 추가하는 방법은 무엇입니까? –

@Juan - 요소 B 또는 요소 B의 조상이 요소 A의 형제 인 경우 요소 B의 클래스를 변경할 필요가 없습니다. 형제 결합자를 사용하여 스타일을 변경하십시오. 요소 B가 요소 A보다 문서 계층 구조 위로 높으면 JavaScript가 필요합니다. – gilly3

function addHoverHandler(buttonId, blankCls, overClasses) { 
    $('#'+ buttonId).hover(
    function(){ 
     $('.blank').addClass(blankCls); 
     $(overClasses).addClass('over'); 
    }, 
    function(){ 
     $('.blank').removeClass(blankCls); 
     $(overClasses).removeClass('over'); 
    } 
    ); 
} 

var buttons = [ 
    {btnId: 'educator', blankCls: 'texteducator', overClasses: '.lee,.gorman'}, 
    {btnId: 'architect', blankCls: 'textatchitect', overClasses: '.bates,.han'} 
]; 



for (var i =0; i < buttons.length; i++) { 
    var btn = buttons[i]; 
    addHoverHandler(btn.btnId, btn.blankCls, btn.overClasses); 
}

출처

2012-04-02 22:32:34

좋은 답변입니다. 즉, 그의 접근 방식을 다시 생각해 보면 영업 이익이 개선 될 것이라고 나는 생각한다. 전체 * "나의 하느님, 그것은 버튼으로 가득하다"* 접근은 병참이고 유용성의 악몽이다라고 약속한다. –

그래, 그렇지만, 그래서 내가 한 일에 대한 질문에 대답하는거야. 나는 그것이 어떻게 사용되는지에 대한 정보가없는 무언가를하는 더 좋은 방법이 있다고 주장하지 않을 것입니다. 하지만 그래, 내가 쓴 것처럼, 페이지에서 20 개의 버튼이 정말로 생각났다. –

@juan - 답변 해 주셔서 대단히 감사 드리며 바로 시도해 보겠습니다. 너무 많은 버튼이 있다는 것에 동의하지만이 프로젝트의 프로그래머 일 뿐이며 디자인을 제어 할 수 없습니다. 모든 사람의 의견을 주셔서 감사합니다! – peachorama

function button(class1, class2, class3, dir){ 
    if(dir == 1){ 
     $(this).addClass(class1); 
     $("."+class2+", ."+class3).addClass("over"); 
    }else{ 
     $(this).removeClass(class1); 
     $("."+class2+", ."+class3).removeClass("over"); 
    } 
}

다음 작업을 수행해야합니다 변경 값을 매개 변수화 간단한 기능 :

$("#educator").hover(function(){ 
    button("txteducator", "bates", "han", 1); 
}, function(){ 
    button("txteducator", "bates", "han", 0); 
});

각 버튼에 대해 동일한 작업을 수행합니다.

$(this).addClass("txt"+$(this).id());

출처

2012-04-02 22:35:58

이것은 올바른 방향입니다. 그러나 당신은 여전히 호버를 20 번 호출해야합니다. 더 쉽게 추상화 될 수 있습니다. 내 대답을보십시오. 또한 class1, class2, class3의 이름은 똑같은 것을 암시하기 때문에 매우 나쁩니다. –

'class1, class2, class3'은 분명히 자리 표시 자입니다. 그 수업이 * OP 코드에서 무엇을하는지 모르겠다. –

버튼을위한 함수를 작성하는 더 효율적인 방법

답변

관련 문제