jQuery - 在一行中执行一段代码

时间:2010-09-29 10:04:14

标签: jquery jquery-selectors

我有一段代码:

                $('#link_dwebsitedesign a').removeClass('selected');
            $('#link_dhuisstijl a').removeClass('selected');
            $('#link_dhosting a').removeClass('selected');
            $('#link_dwordpress a').removeClass('selected');
            $('#link_dseo a').removeClass('selected');
            $('#link_dcms a').removeClass('selected');
            $('#link_dslicen a').removeClass('selected');
            $('#link_dwebshop a').removeClass('selected');

它需要在我的脚本中执行几次。

是否有选择器或其他任何东西,所以我可以在一行中执行这段代码?

示例:$('blockofcode').execute();

7 个答案:

答案 0 :(得分:3)

您可以将代码包装在函数中:

     function mycode(){
        $('#link_dwebsitedesign a').removeClass('selected');
        $('#link_dhuisstijl a').removeClass('selected');
        $('#link_dhosting a').removeClass('selected');
        $('#link_dwordpress a').removeClass('selected');
        $('#link_dseo a').removeClass('selected');
        $('#link_dcms a').removeClass('selected');
        $('#link_dslicen a').removeClass('selected');
        $('#link_dwebshop a').removeClass('selected');
     }

并随时随地调用您的函数:

mycode();

有关详细信息,请参阅Javascript Functions教程。

答案 1 :(得分:2)

我可能会建议缩短它:

$('#link_dwebsitedesign a, #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a,#link_dcms a, #link_dslicen a, #link_dwebshop a').toggleClass('selected');

同样的事情也是如此。你可以把它放在这样的函数中:

function jQuery_ToggleSelected()  
{  
    $('#link_dwebsitedesign a, #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a,#link_dcms a, #link_dslicen a, #link_dwebshop a').toggleClass('selected');    
}  

刚刚调用jQuery_ToggleSelected()来为这些元素添加/删除所需的样式。

答案 2 :(得分:1)

创建一个小插件,为您执行此操作,因为您似乎一直在这样做:

(function($) {
  $.fn.removeSelected = function() {
    return $(this).each(function() {
         $('a', this).removeClass('selected');
     });   
  });
})(jQuery);

然后传递jQuery一组选择器来移除类......

var links_array = ['#link_dwebsitedesign', '#link_dhuisstijl', '#link_dhuisstijl', '#link_dwordpress', '#link_dseo', '#link_dcms', '#link_dslicen', '#link_dwebshop'];

function removeLinks(links) {
    $(links.join(', ')).removeSelected();
}
removeLinks(links_array);

瞧!

答案 3 :(得分:1)

您可以使用对所有人都相同的类并调用

$('.link a').removeClass('selected');

或者,如果你知道你在调用哪个元素,你可以删除所有带有以link开头的id(使用div):

   $('div[id^=link_] a').removeClass('selected');

或者从函数中调用所有内容

function removeLinkSelects(){
    $('#link_dwebsitedesign a').removeClass('selected');
    $('#link_dhuisstijl a').removeClass('selected');
    $('#link_dhosting a').removeClass('selected');
    $('#link_dwordpress a').removeClass('selected');
    $('#link_dseo a').removeClass('selected');
    $('#link_dcms a').removeClass('selected');
    $('#link_dslicen a').removeClass('selected');
    $('#link_dwebshop a').removeClass('selected');
}
removeLinkSelects();

我可能最有可能按顺序使用那些,如果我不能/不想添加一个类使用attr选择器,如果那个使用函数差别很大。 虽然就代码的形式而言,它可能是结构化的,但我更倾向于使用它,但显然我不知道为什么你这样标记它们并且很可能它是完全合乎逻辑的

答案 4 :(得分:0)

将它放在一个函数中,然后调用该函数。

答案 5 :(得分:0)

我会为所有#link_dwebsitedesign, #link_dhuisstijl等元素提供一个共同的类,例如class="link",然后只使用.class selector这样:

$(".link a").removeClass("selected");

您可以在任何发现自己重复代码的地方执行此操作...如果您想要处理批处理中的元素,请使用公共类来识别它们,然后对 类进行操作。

答案 6 :(得分:0)

$('#link_dwebsitedesign a , #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a, #link_dcms a, #link_dslicen a, #link_dwebshop a').removeClass('selected');

或将其放入函数