jQuery 선택기 하이라이트 단순화

Question

나는 100 개가 넘는 비디오를 가지고 있으며 클릭 된 링크를 강조 표시하는 기능을 사용합니다. 코드에 대한 생각은 매우 길어서 for 루프 나 무언가로 단순화 할 수있는 방법이 있어야한다고 생각합니다. 어떤 생각?

var vid_all0 = $('#vid_link0, #vidtop_link0, .vidtop_link0, #vidmob_link0, #link0');  //cache selector 

vid_all0.click(function() {   
    $('[id^=vid_link],[id^=vidtop_link],[id^=vidmob_link], .vidtop_link0').css('background-color', 'inherit'); 
    vid_all0.css('background-color', '#A9CDEB'); //change color of all elements 
    $('.vidtop_link0').css('background-color', 'inherit'); 
}); 

var vid_all1 = $('#vid_link1, #vidtop_link1, #vidmob_link1,#link10'); //cache selector 

vid_all1.click(function() {   
    $('[id^=vid_link],[id^=vidtop_link],[id^=vidmob_link]').css('background-color', 'inherit'); 
    vid_all1.css('background-color', '#A9CDEB'); //change color of all elements 
}); 

var vid_all2 = $('#vid_link2, #vidtop_link2, #vidmob_link2,#link19'); //cache selector 

vid_all2.click(function() {   
    $('[id^=vid_link],[id^=vidtop_link],[id^=vidmob_link]').css('background-color', 'inherit'); 
    vid_all2.css('background-color', '#A9CDEB'); //change color of all elements 
}); 

... 당신이 수정할 수 없습니다 경우

$(".vidtop").on("click", function() 
{ 
    // Do something with their CSS 
}); 

Answer 1

까지가는 당신 클래스가있는 HTML은 다음과 같이 작동해야합니다.

for (var i=1; i=99; i==;) { 
    $(vid_all + i).click(function() {   
     $(this).find('[id^=vid_link],[id^=vidtop_link],[id^=vidmob_link]').css('background-color', 'inherit'); 
    }); 
} 

Answer 2

같은 클래스의 모든 요소를 ​​사용, 모든 요소에 동일한 클래스를 부여 (15)

Answer 3

잘 모르겠습니다. 귀하의 코드를 정확하게 이해할 수 있지만 더 간단한 버전 인 것 같습니다 :

function doStuff(links, additional) { 
    links.click(function() { 
     $('[id^=vid_link],[id^=vidtop_link],[id^=vidmob_link]' + (additional ? "," + additional : "")).css('background-color', 'inherit'); 
     links.css('background-color', '#A9CDEB'); 
     if (additional) { 
      additional.css('background-color', 'inherit'); 
     }  
    }); 
} 

// vid_all0 
doStuff($('#vid_link0, #vidtop_link0, .vidtop_link0, #vidmob_link0, #link0'), $('.vidtop_link0')); 
// vid_all1 
doStuff($('#vid_link1, #vidtop_link1, #vidmob_link1,#link10')); 
// vid_all2 
doStuff($('#vid_link2, #vidtop_link2, #vidmob_link2,#link19')); 
// etc.