Question

如果启用了js，我正在编写一个快速插件（我的第一个）来帮助按钮：

(function ($) {
$.fn.extend({
    chemButton : function (options) {
        return this.each(function () {
            myoptions = $.extend({ x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options);
            var ob = $(this);
            ob.addClass('chemButton');
            var focus = false;
            ob.mousedown(function() {
                focus = true;
                ob.children()
                    .css({ 'background-position' : myoptions.xActive + " " + myoptions.yActive })
                    .addClass('VBfocus')
                    .removeClass('VBHover');
            });
            ob.mouseup(function(){
                focus = false;
                ob.children()
                    .css({ 'background-position' : myoptions.xHover + " " + myoptions.yHover })
                    .removeClass('VBfocus')
                    .addClass('VBHover');
                window.location.href = ob.find('a').attr('href');
            });
            if (focus === false) {
                ob.children().hover(function () {
                    ob.children()
                        .css({ 'background-position' : myoptions.xHover + " " + myoptions.yHover })
                        .removeClass('VBfocus')
                        .addClass('VBHover')
                        .find('a').addClass('VBHover');
                }, function () {
                    if (focus === false) {
                        ob.children()
                            .css({ 'background-position' : myoptions.x + " " + myoptions.y })
                            .removeClass('VBfocus')
                            .removeClass('VBHover')
                            .find('a').removeClass('VBHover');
                    }
                });
            }
        });
    }
});
})(jQuery);

当使用我的插件有两个单独的按钮，即

<script type="text/javascript">
$(document).ready(function(){
    $('.panelButton').chemButton({ x: '0px', y: '0px', xHover: '0', yHover: '-30px', xActive: '0', yActive: '-60px' });
    $('.panelButton2').chemButton({ x: '0px', y: '-30px', xHover: '0', yHover: '-60px', xActive: '0', yActive: '0px' });
});
</script>

最后声明的选项适用于两个按钮。我如何仅应用于它的目标元素？

此致

Answer 1

不确定这是否是原因，但不应该

myoptions = $.extend({ x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options);

是

var myoptions = $.extend({ x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options);

我怀疑通过不将myoptions声明为var，它会一直推广到全局/窗口级别，并且每次都被覆盖。

Answer 2

您应该在这行之前声明选项：

return this.each(function () {

试试这一行：

var myoptions = $.extend({}, { x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options);

并删除你在每个（）函数中的前一行“myoptions”。

jquery - 为每个元素定义不同的选项

2 个答案: