2

特定の要素にアクセスして操作できる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を使用して関数を呼び出したいだけです。何か案は？

4

3 に答える 3

1

必要なのは、IDの配列をjQueryが理解できるIDセレクターに変換する方法だけです。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']
);

参照：

于 2012-06-12T17:57:57.233 に答える
1

思ったよりずっと簡単です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')
于 2012-06-12T18:10:06.240 に答える
0

以下のコードをご覧ください。正しくないかもしれませんが、アプローチを使用できます

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

}

}

必要な場所でこの操作関数を呼び出すよりも

于 2012-06-12T05:30:17.737 に答える