jquery - определение различных опций для каждого элемента - PullRequest
Новая
       7

jquery - определение различных опций для каждого элемента

1 голос
/ 15 июля 2011

Я пишу быстрый плагин (один из моих первых), чтобы помочь с кнопками, если 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);

при использовании 2 отдельных кнопок с помощью моего плагина, т.е. 

<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>

последние объявленные параметры применяются к обеим кнопкам. Как применить только к элементу, для которого он предназначен?

Привет

Ответы [ 2 ]

2 голосов
/ 15 июля 2011

Не уверен, если это причина или нет, но не должен 

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, он продвигаетвплоть до глобального уровня / уровня окна и каждый раз переопределяются.

0 голосов
/ 15 июля 2011

Вы должны объявить свои параметры перед этой строкой: 

return this.each(function () {

Попробуйте эту строку: 

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

и удалите предыдущую строку "myoptions" внутри каждого() функция.

...