단순히 substr을 사용하여 ID를 증분하는 스크립트

Question

20 개의 코드 블록을 포함하는 다음 코드가 있습니다. 그들은 각각의 ID 번호를 제외하고 모두 동일합니다. substr을 사용하여 아래에 붙여 넣은 코드를 단순화하는 방법을 찾아 보았습니다. 이것이 가능하고 모범을 보이면 누군가가 설명해 주실 수 있습니까?

$("#ep1box").on('mouseover focusin' , function() { 
    $('#episode-1__heading-text').css('text-decoration','underline'); 
    $('#episode-1__heading-number').css('color','#fff'); 
}); 

$("#ep1box").on('mouseleave focusout' , function() { 
    $('#episode-1__heading-text').css('text-decoration','none'); 
    $('#episode-1__heading-number').css('color','#18be91'); 
}); 
$("#ep2box").on('mouseover focusin' , function() { 
    $('#episode-2__heading-text').css('text-decoration','underline'); 
    $('#episode-2__heading-number').css('color','#fff'); 
}); 

$("#ep2box").on('mouseleave focusout' , function() { 
    $('#episode-2__heading-text').css('text-decoration','none'); 
    $('#episode-2__heading-number').css('color','#c428ff'); 
}); 

Answer 1

문자열 작성을 위해 substr을 사용할 필요가 없습니다. 그냥 +와 함께 넣어 : 당신은 단지 그들에게 공통점이 있음을 나타 내기 위해 모든 특정 클래스를 줄 수 있다면

물론

for(i=0; i < 20; i++) { 
    $("#ep" + i + "box").on('mouseover focusin' , function() { 
    $('#episode-' + i + '__heading-text').css('text-decoration','underline'); 
    $('#episode-' + i + '__heading-number').css('color','#fff'); 
    }); 

    $("#ep" + i + "box").on('mouseleave focusout' , function() { 
    $('#episode-' + i + '__heading-text').css('text-decoration','none'); 
    $('#episode-' + i + '__heading-number').css('color','#18be91'); 
    }); 
} 

, 훨씬 더 간단한 일을 할 것입니다. 그렇다면 루프가 전혀 필요 없습니다.