2011-08-25 7 views
1

のjQueryのチェックボックスの状態に応じて画像のリンクを有効化/無効化プラグインは画像リンクデフォルトでは私がパラメータとしてHTMLチェックボックスのIDを渡しているためにどのjQueryプラグインを建て

(function($){ 

    $.fn.extend({ 

     pluginname: function(options){ 

      var defaults = { 
       chckBoxID: "" 
      } 
      var options = $.extend(defaults, options); 
      var o = options; 
      $("div#" + imageDiv).html("<a><img src='images/x.gif'></img></a>"); 
     } 
    }); 
}); 

を生成し、チェックボックスがチェックされていません。

私は何をしたいです:ユーザーがクリックは/チェックボックスをチェックすると

(1)、画像リンクは、新しいブラウザウィンドウを開きます。

(2)ユーザーがチェックボックスをオフにすると、画像リンクで新しいブラウザウィンドウが開きません。

あなたのお手伝いがありがとうございます。

私のコードへの更新---

HTMLコードは、この

<div> 
    <input type="checkbox" id="chk1" /> 
</div> 
<div class="plugin" id="1"></div> 

<a><img>のように見えますが、プラグインによって生成される

$(this).html("<a><img src='images/x.gif'></img></a>"); 
+0

何か不足しているようです。 'imageDiv'はどこから来たのですか?あなたが追加しているイメージが新しいウィンドウに表示されるのですか、それとも他のイメージですか? – tvanfosson

答えて

1

$(これ)をプラグインに渡す方法は使用できません。その後、私はあなたがあなたのプラグインでやろうとしているが、このようなものであると信じてい

$("div.plugin").each(function (i) { 
    $(this).pluginname({ 
     chckBoxID: "chk" + $(this).attr("id") 
    }); 
}); 

:あなたはこのかかわらような何かを行うことができ

(function ($) { 
    $.fn.pluginname = function (options) { 
     var opts = $.extend({}, $.fn.pluginname.defaults, options); 

     var pluginnameClick = function (e) { 
      if ($("#" + opts.chckBoxID).is(":checked")) { 
       e.preventDefault(); 
       window.open($(this).attr('href')); 
      } 
     }; 

     $(this).each(function (i) { 
      $('a', $(this)).bind("click", pluginnameClick); 
     }); 
    }; 

    $.fn.pluginname.defaults = { 
     chckBoxID: "chk" 
    } 
})(jQuery); 

これはあなたのHTMLコードは次のようになります前提としています。

<div class="plugin" id="1"> 
    <a href="link1.htm"><img src="image.jpg" /></a> 
    <input type="checkbox" id="chk1" /> 
</div> 
<div class="plugin" id="2"> 
    <a href="link2.htm"><img src="image.jpg" /></a> 
    <input type="checkbox" id="chk2" /> 
</div> 
関連する問題