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

Question

我有一段代码：

                $('#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();

Answer 1

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

     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 函数 教程以获取更多信息。

Answer 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() 即可向这些元素添加/删除所需的样式。

Answer 3

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

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

瞧！

Answer 4

你可以使用一个对所有元素都相同的类并调用

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

或者如果你知道你正在调用什么元素，你可以删除所有 id 以 link 开头的元素（使用 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 选择器，如果完全不同，请使用一个函数。
尽管就代码看起来可以构建的方式而言，我更倾向于使用，但显然我不知道为什么你这样标记它们，而且很可能这是完全合乎逻辑的

Answer 5

将其放入函数中，然后调用该函数。

Answer 6

我会给所有这些 #link_dwebsitedesign、#link_dhuisstijl 等元素一个公共类，例如 class="link"，然后只需使用 .class 选择器 像这样：

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

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

Answer 7

$('#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');

或者将其放入函数中