CODEWITHSUNDEEP
javascriptjqueryfunction
endolil
endolil

Reputation: 21

Function in jQuery to manipulate a group of ids

I am trying to create a jQuery function with which I can access to certain elements and manipulate them. So far I was only able to access to certain ids and manipulate them but I don't know how to program a function which just takes a string as a parameter and I can basically reuse this function for all elements I want to manipulate.

This is what I have so far:

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

}

});

It allows me to manipulate a group of ids. So if I want to manipulate another group of ids in my document I would have to write the same code again. Can anybody tell me how to create a function from this code which accepts parameters? I would like to just call the functions with the ids I want to manipulate as a parameter string for the function. Any ideas?

Upvotes: 2

Views: 441

Answers (3)

KoU_warch
KoU_warch

Reputation: 2150

is a lot simpler than you think, you can use javascript variables inside your function, 

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

You can even use an array of strings and use something like 

 ...
 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')

Upvotes: 1

mu is too short
mu is too short

Reputation: 434805

All you need is a way to turn array of IDs into an ID selector that jQuery will understand. This isn't terribly difficult if you know your way around 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...
    }
}

Then you can use it like this:

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

References:

Upvotes: 1

sandeep patel
sandeep patel

Reputation: 436

please see the code below, It may not be correct but you can use the 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();
            }
        });     

}

}

Than call this manipulate function where you need

Upvotes: 0

Related Questions