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

... 它上升到15

Answer 1

将所有这些元素放在同一个类中，然后使用该类的所有元素，如

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

Answer 2

如果您无法使用类修改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 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.

简化jQuery选择器突出显示

3 个答案: