jQueryで要素を複製するプラグインの作成

このQ&Aのポイント
  • jQueryのプラグインを作成しています
  • 追加ボタンをクリックしたら、指定要素を複製していくというものです
  • プラグインを作成しましたが、要素(clone_base1)が消えてしまいます。原因もわからず困っています。どのようにしたらよいのでしょうか
回答を見る
  • ベストアンサー

jQueryで要素を複製するプラグインの作成

jQueryのプラグインを作成しています。 やりたいことは、追加ボタンをクリックしたら、指定要素を複製していくというものです。 下記のようにプラグインを作成しましたが、 なぜか要素(clone_base1)が消えてしまいます。 原因もわからず困っています。 どのようにしたらよいのでしょうか。 (function(jQuery) { jQuery.fn.clone = function(options) { //defaultの値 var options = jQuery.extend({ reset_form: true ,clone_base : "clone_base1" }, options); return this.each(function() { jQuery(this).click(function(){ //元となるボックスを複製 jQuery("."+options.clone_base).clone().appendTo("."+options.clone_base); }); }); }; })(jQuery);

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 失礼しました。 どうやら、こちらのほうが普通らしいですね。 $.fn.extend({  hoge: function(){   alert("fuga");  } });

hukazuo
質問者

お礼

ありがとうございました。 無事解決しました。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

どういう仕様のプラグインにしたいのか良くわかりませんけれど… cloneを上書きしたいということでしょうか? いずれにしろ、  > return this.each(function() { の時のthis値を確認してみてください。(多分、想定と違うはず) 普通だとこんな利用方法では? if($(null).hoge) $(null).hoeg(); else alert("none"); // → none $.fn.hoge = function(){  alert("fuga"); }; if($(null).hoge) $(null).hoge(); else alert("none"); // → fuga

hukazuo
質問者

お礼

ありがとうございました。

関連するQ&A

  • jQueryプラグインでfn指定しないのはどんな時

    ■質問1 ・jQueryプラグイン内で、jQuery.fn.hoge = function() {と書くと、jQuery(指定セレクト要素).hogeでメソッド実行できるみたいですが、逆にプラグイン内で、jQuery.hoge = function() { と書くのはどんな時なのでしょうか? セレクタで呼び出さないとき? ■質問2 ・「jQuery.fn.extend」「「jQuery.extend」は、上記とはまた別の話なのでしょうか?

  • jQueryの仕組みについて質問です

    お世話になります。現在jQueryのコードを読んでいるのですが、どうしてもわからないところがあります。 jQuery1.11.1の2774行目、jQuery.merge(...)と自分自身を呼び出していますが、これはjQuery中でどのような処理をして実現しているのでしょうか?jQuery.merge = function(){...};としているわけでもないのに呼び出せているのが理解できません。 mergeメソッド自体は、450行目、jQuery.extend内で定義されているようです。 以下簡易化したjQueryです。 var window = this; // ブラウザ以外で実行する場合のみ必要 (function(){ jQuery = window.jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; jQuery.fn = jQuery.prototype = { hello: function(){ console.log("hello from fn!"); // ここをjQuery.logと書けるようにしたい } }; jQuery.extend = jQuery.fn.extend = function() {}; jQuery.extend({ log: function(msg){ console.log(msg); } }); init = jQuery.fn.init = function( selector, context ) { console.log("Hello"); }; init.prototype = jQuery.fn; // ここをjQuery.logと書けるようにしたい } )(); jQuery().hello();

  • CakePHPでjQueryを使うには

    ローカル環境にてCakePHPでwebサービスを制作しています。 ブラウザでviewを確認しながら構築しているのですが、この環境でgoogleAPIのjQueryを動作させることは出来るのでしょうか? もしできるとしたら、 <?php echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> で動かないのは何が問題なのでしょうか? また、googleAPIを使わない方法でも以下のように試しましたが、これも動かない原因はどこにあるのでしょうか? jQueryのホームページでver1.5のソースをコピーし作ったjQuery1.5.jsを、 webroot /jsに入れる。 Controllerに var $helpers=array('Ajax','Javascript'); を記述。 Viewに、 <?php echo $javascript->link('jQuery.1.5.js'); ?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> 宜しくお願いします。

  • jQueryプラグインtubular使い方について

    アメブロの背景全体にYOUTUBE動画を流したいのですがやり方がわかりません。 jQueryのダウンロードサイトで進んで行って、英語文字列のページ出てきて それを名前を付けて保存。 jquery-tubularのjquery-tubular1.0.1ってやつも取り込みました。 <script> $(function(){ $('document').ready(function() { var options = { videoId: ''}; $('#window').tubular(options); }); }); </script> これにYOUTUBEの動画IDを''に入れました。 それをプラグインのところに張り付けてみたんですが何も起こりません。 サイトで載っている、「先にjQuery本体を、続いてダウンロードしてきた jQuery Tubularを読み込み」っていう部分も意味が分かりません。 どなたかやり方を教えてください・・ よろしくお願いします。

  • jQueryリサイズ処理と記述でご指摘ください。

    jQueryプラグインで、「mLivre」というプラグインを使っております。 ※mLivre:[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 「mLivre」は画像をめくるように表示してくれるプラグインです。 このプラグインをレスポンシブにしたいと思い、リサイズ命令でブラウザサイズに合わせて 大きさを変えていきたいと思っております。 現時点で画像の表示自体はリサイズ出来ておりますが、 ページをめくる動作でアニメーションの表示が上手くいきません。 一番初めの数値(ページを開いた時点での数値)を記憶しているのか、 一番初めに表示されていた場所から画像がめくられてしまいます。 (説明が下手で申し訳ございません) 素人で恐縮ですが、私の記述で間違っているところがあり 私自身、間違いに気付けない状態です。 下記にコードを記述いたしました。 ご指摘いただければと思います。 ---------「mLivre」呼び出し部---------- jQuery(function() { var imgWi; var imgHi; var winWi; var scaleWi; var setWi; var setHi; setSize(); jQuery('#slide').mLivre({ pageDefault:0, over:true, loader:true, eventLoad:null, eventOpen:null, width:setWi, height:setHi, dossier:'http://URL/images/slide/', //画像 }); function setSize() { //画像サイズ指定 imgWi = 500; imgHi = 375; winWi = jQuery( '#branding' ).width(); scaleWi = winWi / imgWi; setWi = winWi; setHi = imgHi * scaleWi; jQuery("#slide img").width(setWi); //画像の大きさ jQuery("#slide img").height(setHi); } }); ------「mLivre」コア部---------- //11行目はじまり (function(jQuery) { jQuery.fn.mLivre = function(options,num) { switch (options) { //switch部 略 // break; } //↓追加したリサイズ部 jQuery(window).resize(function(){ var imgWi; var imgHi; var winWi; var scaleWi; var setWi; var setHi; imgWi = 500; imgHi = 375; winWi = jQuery( '#branding' ).width(); scaleWi = winWi / imgWi; setWi = winWi; setHi = imgHi * scaleWi; jQuery("#slide img").width(setWi); //画像の大きさ jQuery("#slide img").height(setHi); var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options); jQuery(this).each(function() { var $obj=jQuery(this); opts.width = setWi; opts.height = setHi; jQuery(".mLivre").width(setWi); //プラグインの大きさ jQuery(".mLivre").height(setHi); }); }); //↓元々の記述、変更していません var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options); jQuery(this).each(function() { var $obj=jQuery(this); //省略 })(jQuery); var mLivre={ //ここからが処理部(アニメーション)だと思います。(変更していません) progress:false, //省略 }); } }

  • jqueryのロールオーバーについて

    jqueryのロールオーバー設定に関してご質問です。 あるサイトのコーディングを行ってます。 サイト内のナビーゲーションボタンを瓶の画像でまとめてます。 各瓶の画像にリンクを付け、 マウスを乗せるとその瓶が開いた画像が 切り替わりでフェードインの感じで出てくるという設定を目指しているのですが、 うまくいきません。 色々やった結果マウスを当てると、 切り替わりで空いた瓶がフェードで出るのですが、 その画像奥に閉じた瓶がそのまま残ってて重なってる感じです。 こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか? ちなみに画像はpngです。 フェードの切り替わりは是非そのまま使用したいと考えてます。 あとマウスを外せばまた閉じた瓶がフェードで出るという感じを目指してます。 どなたかご教示いただいてもよろしいでしょうか? 一応下記htmlとjsコードも載せておきます。 ▼html <script src="../lib/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageRollover.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageRollover({ selector : 'img.rollover', // セレクタ ←(7) attach : '_on', // ファイル名末尾句 ←(8) onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9) offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10) }); }); </script> <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50"></a> <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50"></a> ▼jquery.tgImageRollover.js ;(function($){ $.fn.tgImageRollover = function(options){ var opts = $.extend({}, $.fn.tgImageRollover.defaults, options); $(opts.selector).each( function(){ this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2"); this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;">'); $(this).before(this.onHtml); $(this.onHtml).hover( function(){ $(this).stop().animate({'opacity': '1'}, opts.onFadeTime); }, function(){ $(this).stop().animate({'opacity': '0'}, opts.offFadeTime); } ) } ) } // default option $.fn.tgImageRollover.defaults = { selector : 'img.rollover', attach : '_on', onFadeTime : 600, offFadeTime : 400, }; })(jQuery);

  • jQueryで要素を取得した後の使い方について

    jQueryでグローバル変数に要素を代入した後にその変数を利用したいのですが記述方法がわかりません。 var element; // クリックしたinputの要素をelementに代入 $(function(){  $("input").click(function(){   element = $(this);  }); }); // elementを利用する function alertEx(){  alert($(element).val()); } alertEx関数を実行するとクリックしたinputの値を表示するようにしたいです。 alertEx関数でのelementの使い方が間違っていると思うのですが、どのように記述すればinputの値をalert表示できるのでしょうか? 知りたいのは、あくまでも要素をelementに代入した後の利用の仕方です。 表示方法とかではないです(上記コードは例です)。 どうぞよろしくお願い致します。

  • jQueryを使ってランダムに表示

    jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。 現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか? できればjsのみの修正でできれば良いのですが…。 どなたかお助けください。よろしくお願いいたします。 jsとhtmlは以下のようにしています。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children().eq(r).show().prependTo($(this)); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")); }); }); }); <div randomdisplay="3"> <div id="box">ランダム1</div> <div id="box">ランダム2</div> <div id="box">ランダム3</div> <div id="box">ランダム4</div> <div id="box">ランダム5</div> </div>

  • jqueryについて教えて下さい。

    貴重な場をお借りして質問させていただきます。 知識のある方、お力を貸して下さい。 今勉強の為プラグインなどを制作しておりまして、 一定の値までスクロールするとコンテンツをフェイドインさせるような スクリプトを書いています。 ただ、別ページに遷移して戻ってくると、opacityが0となり真っ白な状態と なってしまいます。 それを解決するためにcookieなどを使ったりはして出来たのですが、 スマートではないので、cookieを使用せずに出来れば嬉しいのですが、 良い方法ございましたら、ご教示いただけないでしょうか。 宜しくお願い致します。 <script type="text/javascript"> $(function(){ $('#contents1').locationFade(); $('#contents2').locationFade(); $('#contents3').locationFade(); $('#contents4').locationFade(); }) </script> (function($) { $.fn.locationFade = function(options){ var defaults = { fadeSpeed:500, location:300, easing:'swing' } var opts = $.extend(defaults , options); var windowHeight = $(window).height(); var target = $(this); target.css('opacity',0);//最初に透明度0とする $(window).on('load' , function(){ //画像が読み込まれた後でないとtargetOffsetがきちんと取れない為 target.each(function(){ var targetOffset = target.offset().top; if(windowHeight > targetOffset){       //最初から要素がwindowサイズ内に表示されているなら即fadeIn target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) } $(window).on("scroll", function(){ var scrollTop = $(window).scrollTop(); var scrollVol = scrollTop + windowHeight - opts.location; //locationはその要素のどれだけ上に来た時に表示するかの値 if(targetOffset <= scrollVol){ target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) }; }); }); }); }; })(jQuery);

  • 【jQuery】カスタムイベントと.on()

    お世話になります。 題名の通りなのですが、どうにも上手く動きません。 1.カスタムイベントの作成(bind)と初期着火 $(element).on('myEvent', function() {  $(this).myPlugin(); }).trigger('myEvent'); 2.ajaxで作成された要素に(.live()) $(document).on('myEvent', '.myClass', function() {  $(this).trigger('myEvent'); } ); 1は問題なく期待した通り動作します。 2は、まったく動きません。 ※myPluginは有名なjQueryプラグインです。 それぞれをチェーンで繋いでみたり、セレクターを変えてみたりと試しているのですが、 どうにも解決できないので、お知恵をお貸し下さい。 よろしくお願いいたします。

専門家に質問してみよう