JS 코드 한 단락을 하나의 방법으로 봉인하다

}).mouseout(function(){
    $("#plate-3hover").removeClass("plate-3after")
});

$("#plate-4").mouseenter(function() {
    $("#plate-4hover").addClass("plate-4after")
}).mouseout(function(){
    $("#plate-4hover").removeClass("plate-4after")
});

$("#plate-5").mouseenter(function() {
    $("#plate-5hover").addClass("plate-5after")
}).mouseout(function(){
    $("#plate-5hover").removeClass("plate-5after")
});

$("#plate-6").mouseenter(function() {
    $("#plate-6hover").addClass("plate-6after")
}).mouseout(function(){
    $("#plate-6hover").removeClass("plate-6after")
});

$("#plate-7").mouseenter(function() {
    $("#plate-7hover").addClass("plate-7after")
}).mouseout(function(){
    $("#plate-7hover").removeClass("plate-7after")
});

위에서 보듯이 동생은 위의 JS 코드를 하나의 JS 방법으로 봉인하려고 한다.하지만 생각이 없으니 어떻게 손을 대야 할지 모르겠으니 신들의 조언을 부탁드립니다.범례가 있는 것이 가장 좋다.
주: 이 JS 코드는 특수효과 코드입니다. 효과는 마우스를 이동하여 이동하는 애니메이션 효과입니다.원리는dom의 클래스 스타일을 제거하는 것이다

10개의 응답

건물주가 프로그래밍 경험이 부족한 것을 감안하여 나는 우선 jQuery 플러그인으로 봉인하는 등 높은 방법에 대해 말하지 않겠다.단지 포장 방법으로만 말하자면.
방법, 즉 함수.프로세스식 언어를 위한 코드 복용의 초급 수단으로 간단하게 말하면 중복된 부분을 함수로 봉인하는 것이다.
예를 들어 고양이가 여러 번 울면 cat.meow() 당신은 횟수에 대응하는 코드를 쓸 수 없습니다. 일반적으로 다음과 같이 쓸 수 있습니다.

function meow(num){
    for(var i=0;i<num;i++){
        cat.meow()
    }
}

meow(1000)

이것이 바로 가장 기초적인 코드 복용이다.물론 대상을 향한 언어는 더 간단할지도 모른다cat.meow(1000)그럼 건물주를 겨냥한 경우.단계적으로 각 단계의 방법을 이야기하다.가장 간단한 함수로 봉인하면 다음과 같다.

function effect(srcDom,destDom,className){
    $(srcDom).mouseenter(function(){
        $(destDom).addClass(className)
    }).mouseout(function(){
        $(destDom).removeClass(className)
    })
}

그리고 호출

effect('#plate-1','#plate-1hover','plate-1after')
effect('#plate-2','#plate-2hover','plate-2after')
effect('#plate-3','#plate-3hover','plate-3after')

건물주의 DOM ID와 Class 이름이 비교적 규칙적인 것을 감안하여 이렇게 쓸 수 있다

function effect(name){
    $('#'+name).mouseenter(function(){
        $('#'+name+'hover').addClass(name+'after')
    }).mouseout(function(){
        $('#'+name+'hover').removeClass(name+'after')
    })
}

그리고 호출

effect('plate-1')
effect('plate-2')
effect('plate-3')

그러나 이렇게 하는 것은 여전히 통용되지 않는다. 건물주는 사건 방면의 사건 의뢰에 관한 지식을 보아야 한다

이벤트 의뢰

이벤트 의뢰는 구체적인 DOM 구조를 결합하여 보아야 한다.다음과 같은 구조가 있다고 가정합니다.

<div class="wrap">
    <div class="box1">
        <span class="trigger">trigger</span>
        <div class="effect"></div>
    </div>
    <div class="box2">
        <span class="trigger">trigger</span>
        <div class="effect"></div>
    </div>
    <div class="box3">
        <span class="trigger">trigger</span>
        <div class="effect"></div>
    </div>
</div>

function effect(node){
    $(node).on('mouseenter','.trigger',function(){
        var $this=$(this);
        $this.parent().find('.effect').addClass('after')
    })
    $(node).on('mouseout','.trigger',function(){
        var $this=$(this);
        $this.parent().find('.effect').removeClass('after')
    })
}

이렇게 하면 호출할 때 한 번만 호출할 수 있다.

effect('.wrap')

물론 이 가설은 모든 컨트롤러의 효과가 비슷하다고 가정한다. 만약 다르다면 두 가지 해결 방안이 있다. 1.box 부모 클래스를 이용하여 스타일 차원에서 해결합니다.2.js 차원에서 설정 항목 파라미터를 하나 더 추가합니다
너의 사고방식에 따라 이렇게 쓸 수 있다.

function addEvent(selector,n){
    for (var i=1;i<=n;i++){
        (function(){
                $(selector +"-"+i).mouseenter(function() {
                    $(selector +"-"+i+"hover").addClass(selector +"-"+i+"after")
                }).mouseout(function(){
                    $(selector +"-"+i+"hover").removeClass(selector +"-"+i+"after")
                });
            }
        })(i);        
}

addEvent('#plate',7);

사고방식은 귀속할 모든 요소를 순환시켜 그들에게 해당하는 사건을 추가하는 것이다.i의 지향이 정확한지 확인하기 위해 매번 순환에서 클러치를 사용했습니다.그러나plate 요소가 많으면 많은 이벤트를 연결할 수 있기 때문에 이렇게 하는 것을 권장하지 않습니다.
이벤트 에이전트를 통해 권장되는 방법:

$(document).on('mouseover',function(e){
    if ($(e.target).hasClass('plate')){
        // plate class
        // :$("#plate-"+$(e.target).index()+"hover").addClass("#plate-"+$(e.target).index()+"after")
    }
});
$(document).on('mouseout',function(e){
    if ($(e.target).removeClass('plate')){
        // plate class
    }
});

이런 방식은 두 개의 이벤트 처리 함수만 귀속시킬 수 있다.터치할 때 마우스가 목표 블록에 들어갔는지 판단합니다. (당신의dom 구조를 모르기 때문에 상세하게 쓰지 않았습니다. 그들에게 통일된class를 추가하여 판단하기 쉽도록 권장합니다.)물론 이 이벤트는document가 아닌plate 요소의 부모 요소에 귀속되어야 합니다. 불필요한 이벤트의 촉발을 줄이고 $(e.target)를 통해 촉발된dom를 선택한 다음, 상응하는class를 추가합니다.
여기에서mouseenter와mouseover,mouseleave와mouseout의 차이를 주의해야 한다.
×설명 지원 섹션 Markdown 구문:**bold** _italic_ [link](http://example.com) > `code` - .
동시에 당신의@ 사용자에게도 통지를 받을 수 있습니다
덤을 같이 붙이는 걸 추천합니다.
×설명 지원 섹션 Markdown 구문:**bold** _italic_ [link](http://example.com) > `code` - .
동시에 당신의@ 사용자에게도 통지를 받을 수 있습니다
아이디어 제공:

for (var i = 1; i <= 6; i++) {
    (function(j) {
        $("#plate-" + j).mouseenter(function() {
            $("#plate-" + j + "hover").addClass("#plate-" + j + "after")
        }).mouseout(function() {
            $("#plate-" + j + "hover").removeClass("#plate-" + j + "after")
        });
    })(i)
}

포장 수준이 낮음(프로세스용):

function f( ele ) {
    // dom 
    
    $(ele).mouseenter(function() {
        $(ele+"hover").addClass(ele+"after")
    }).mouseout(function(){
        $(ele+"hover").removeClass(ele+"after")
    });
}
// 

포장 깊이(객체용):

function Binde( ele, length ) {
    this.f = function( ele ) {
        $(ele).mouseenter(function() {
            $(ele+"hover").addClass(ele+"after")
        }).mouseout(function(){
            $(ele+"hover").removeClass(ele+"after")
        });
    };
    
    for( var i = 0; i < length; i ++ ) {
        this.f( ele + i );
    }
}

$("selector[id|='plate']").mouseenter(function(){

  $("#"+$(this).attr("id")+"hover").addClass("")
}).mouseout(function(){
  $("#"+$(this).attr('id')+"hover").removeClass("")
})

selector는 네가 서명한 것이다. 나는 너의 라벨을 봉인하지 않아도 해결할 수 있다는 것을 모른다.