簡化jQuery選擇器高亮

我有超過100個視頻，我用一個函數來突出顯示點擊的鏈接。代碼思想很長，我覺得必須有一種方法來將它簡化爲for循環或其他東西。任何想法？簡化jQuery選擇器高亮

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 
});

... 它上升到15

來源

2014-02-13 SamotnyPocitac

你能發佈一些html？ – alex

爲什麼使用for循環？只需突出顯示通過檢測您的元素的id onclick點擊一個。 –

jquery選擇器適用於循環：例如爲什麼在'vid_all0.click'中有'.vidtop_link0' - 第一行（下一次點擊事件沒有它）？和＃link0，＃link10，＃link19'序列有什麼關係？ – Xeon

給所有這些因素相同的類，然後使用與該類別的所有元素，如

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

來源

2014-02-13 14:27:59

如果您不能修改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'); 
    }); 
}

來源

2014-02-13 14:31:00 isherwood

我不知道如果我ü正確理解你的代碼，但這似乎是一個更簡單的版本：

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.

來源

2014-02-13 14:32:22

簡化jQuery選擇器高亮

回答

相關問題