Question

我正在尝试创建一个jQuery函数，我可以使用它来访问某些元素并对其进行操作。到目前为止，我只能访问某些ID并操纵它们，但我不知道如何编写一个函数，它只需要一个字符串作为参数，我基本上可以将这个函数重用于我想要操作的所有元素。

这是我到目前为止所做的：

jQuery(document).ready(function () {

// id for the trigger
var trigger = jQuery('#acf-use_right_column');

if (jQuery(trigger).length) {
    // list of ids to be manipulated
    var ids = jQuery('#acf-content_right_column, #acf-show_content, #acf-show_news, #acf-news_header, #acf-show_newsletter_form');
        // toggle element on click to hide/show 
        trigger.find('input:checkbox').click(function() {
            ids.toggle();
        });
        // hide id in dependence of the state of the checkbox
        trigger.find('input:checkbox').each(function(){
            // if checkbox not checked
            if(!jQuery(this).attr('checked')){ 
                ids.hide();
            }
        });     

}

});

它允许我操纵一组id。因此，如果我想在我的文档中操作另一组ID，我将不得不再次编写相同的代码。任何人都可以告诉我如何从接受参数的代码创建函数？我想用我想要操作的id调用函数作为函数的参数字符串。有什么想法吗？

Answer 1

您只需要一种将ID数组转换为ID选择器的方法 jQuery会明白的。如果你知道的话，这并不是非常困难你的方式jQuery。

// Name it whatever you want, 'pancakes' is my 'foo'.
function pancakes(trigger, ids) {
    trigger = $('#' + trigger);
    // `trigger` is a jQuery object already so you don't have to
    // `jQuery(trigger)` here
    if(trigger.length) {
        // This turns `['a','b','c']` into `$('#a,#b,#c')`, the $.map adds the
        // `'#'` prefix to each element of the `ids` array and produces another
        // array with the prefixed `ids`; the `join` sticks the elements of the
        // new array together into a multiple selector.
        ids = $($.map(ids, function(id) { return '#' + id }).join(','));

        // And the rest is as you had it...
    }
}

然后你可以像这样使用它：

pancakes(
    'act-use_right_column',
    ['acf-content_right_column', 'acf-show_content', 'acf-show_news', 'acf-news_header', 'acf-show_newsletter_form']
);

参考文献：

Answer 2

比您想象的要简单得多，您可以在函数中使用javascript变量，

 function myNewFunction(parameter1,parameter2){

      var trigger = jQuery(parameter1);
      if (jQuery(trigger).length) {
           // list of ids to be manipulated
           var ids = jQuery(parameter1+', '+parameter2+'_content, '+parameter2+'_news, '+parameter2+'_header, '+parameter2+'_newsletter_form');
           // toggle element on click to hide/show 
           trigger.find('input:checkbox').click(function() {
                ids.toggle();
           });
           // hide id in dependence of the state of the checkbox
           trigger.find('input:checkbox').each(function(){
           // if checkbox not checked
           if(!jQuery(this).attr('checked')){ 
               ids.hide();
           }
       });     
     }
 }

 myNewFunction('#acf-use_right_column','#acf-show');

您甚至可以使用字符串数组并使用类似

的内容

 ...
 compare = ids.lenght-1
 for (var key in idArray){
     if(key!=compare){
        string=string+idArray[key]+', '
     }else{
        string=string+idArray[key]
     }
 }
 ids = jQuery(string)
 ...

 idArray = new Array('#id1','#id2','#id3','#id4')

Answer 3

请参阅下面的代码，可能不正确，但您可以使用appraoch

var manipulate=function(tiggerobj, arrayofobj){

// step1 :- use parameter1 fpr id for the trigger
var trigger = jQuery(tiggerobj);

if (jQuery(trigger).length) {
    // list of ids to be manipulated
var ids=new Array();
//step2 :-accumaltae all the ids
for (var ob in arrayofobj){

id.push(jQuery(arrayofobj(ob)));
}


        //step3- toggle element on click to hide/show 
        trigger.find('input:checkbox').click(function() {
            ids.toggle();
        });
        // hide id in dependence of the state of the checkbox
        trigger.find('input:checkbox').each(function(){
            // if checkbox not checked
            if(!jQuery(this).attr('checked')){ 
                ids.hide();
            }
        });     

}

}

在需要的地方调用此操作函数

jQuery中的函数来操作一组id

3 个答案: