Question

我构建了一个jquery插件，我将HTML复选框的ID作为参数传递给我：

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

该插件会生成图片链接

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

Answer 1

你不能使用$（this）将它传递给插件的方式。你可以这样做：

$("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>

根据jquery中复选框的状态启用/禁用图像链接

1 个答案: