jquery - How to access a variable outside a function in Javascript - Stack Overflow

admin管理员组

文章数量:1026989

Here is the code I am working with:

$(document).ready(function () {

    var TemplateEditor = function () {

        var GroupClassName = 'group';
        var SelectedGroup = 0;

        var BindClicks = function () {
            $('.CriteriaSelections').unbind('click').click(function (event) {
                event.preventDefault();
                if (fnIsTheClickedBoxaGroup($(this))) {
                    TemplateEditor.GroupClicked();
                }
                else {
                    TemplateEditor.CriteriaClicked($(this), SelectedGroup);
                }
            });

            $('.groupselected').unbind('click').click(function (event) {
                event.preventDefault();
                SelectedGroup = $(this).attr('group-'.length);
                TemplateEditor.SelectGroup(SelectedGroup);
            });
        }


        var fnGetGroupID = function (Obj) {
            if (fnIsTheClickedBoxaGroup(Obj) == true) {
                return null;
            }
            else {
                //Get parent which is the group
                var ObjParent = Obj.parent();
                var GID = ObjParent.attr('id').substr('group-'.length);
                return GID;
            }
        }

        var fnIsTheClickedBoxaGroup = function (Obj) {
            var GetClass = Obj.attr('class');
            if (GetClass == GroupClassName) {
                return true;
            }
            else {
                return false;
            }
        }

        return {
            Init: function () {
                BindClicks();
            },
            CriteriaClicked: function (Obj, GroupID) {
                $('<div>').attr({ id: '' }).addClass('selection').text(Obj).appendTo('#group-' + GroupID);
            },
            GroupClicked: function () {

            },
            SelectGroupClicked: function () {

            },
            UpdateTargetPanel: function () {

            }
        };
    } ();
    TemplateEditor.Init();
});

I am trying to access this variable: GroupClassName

This variable is inside this function

var fnIsTheClickedBoxaGroup = function (Obj) {
                var GetClass = Obj.attr('class');
                if (GetClass == GroupClassName) {
                    return true;
                }
                else {
                    return false;
                }
            }

When I run the program it says GroupClassName is undefined. Am I missing something here?

Here is the code I am working with:

$(document).ready(function () {

    var TemplateEditor = function () {

        var GroupClassName = 'group';
        var SelectedGroup = 0;

        var BindClicks = function () {
            $('.CriteriaSelections').unbind('click').click(function (event) {
                event.preventDefault();
                if (fnIsTheClickedBoxaGroup($(this))) {
                    TemplateEditor.GroupClicked();
                }
                else {
                    TemplateEditor.CriteriaClicked($(this), SelectedGroup);
                }
            });

            $('.groupselected').unbind('click').click(function (event) {
                event.preventDefault();
                SelectedGroup = $(this).attr('group-'.length);
                TemplateEditor.SelectGroup(SelectedGroup);
            });
        }


        var fnGetGroupID = function (Obj) {
            if (fnIsTheClickedBoxaGroup(Obj) == true) {
                return null;
            }
            else {
                //Get parent which is the group
                var ObjParent = Obj.parent();
                var GID = ObjParent.attr('id').substr('group-'.length);
                return GID;
            }
        }

        var fnIsTheClickedBoxaGroup = function (Obj) {
            var GetClass = Obj.attr('class');
            if (GetClass == GroupClassName) {
                return true;
            }
            else {
                return false;
            }
        }

        return {
            Init: function () {
                BindClicks();
            },
            CriteriaClicked: function (Obj, GroupID) {
                $('<div>').attr({ id: '' }).addClass('selection').text(Obj).appendTo('#group-' + GroupID);
            },
            GroupClicked: function () {

            },
            SelectGroupClicked: function () {

            },
            UpdateTargetPanel: function () {

            }
        };
    } ();
    TemplateEditor.Init();
});

I am trying to access this variable: GroupClassName

This variable is inside this function

var fnIsTheClickedBoxaGroup = function (Obj) {
                var GetClass = Obj.attr('class');
                if (GetClass == GroupClassName) {
                    return true;
                }
                else {
                    return false;
                }
            }

When I run the program it says GroupClassName is undefined. Am I missing something here?

• javascript
• jquery

Share Improve this question Follow asked Apr 30, 2010 at 19:04 Luke101Luke101 65.4k8888 gold badges244244 silver badges374374 bronze badges 3

• Try alert(GroupClassName) in the fnIsTheClickedBoxaGroup function. I see no reason why GroupClassName shouldn't be set when you get to it. Also, do you accidentally say var GroupClassName multiple times? Do you use incorrect capitalization? – Joey Adams Commented Apr 30, 2010 at 19:24
• OK..when i take var off it works. but i don't understand why its working – Luke101 Commented May 1, 2010 at 2:33
• You could also try seeing if it works in other browsers. Because you don't end your function assignment statements (var x = function(){...}) with semicolons, your code technically has syntax errors and might not work in all browsers. In general, take a look at what JSLint (jslint.) has to say about your code. – Joey Adams Commented May 1, 2010 at 3:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Try this

function fnIsTheClickedBoxaGroup(Obj) {
  var GetClass = Obj.attr('class');
  return (GetClass == GroupClassName);
}

The code you posted works correctly. Try it here and see.

The only change I made for the test is after the call to fnIsTheClickedBoxaGroup:

if (fnIsTheClickedBoxaGroup($(this))) {
    alert('fnIsTheClickedBoxaGroup returned true');
    //TemplateEditor.GroupClicked();
}
else {
    alert('fnIsTheClickedBoxaGroup returned false');
    //TemplateEditor.CriteriaClicked($(this), SelectedGroup);
} 

You're getting the error due to something you haven't shown here. Maybe you're using GroupClassName in an additional location?

$(document).ready(function () {

    var TemplateEditor = (function () {

        var __self = this;

        __self.groupClassName = 'group',
        __self.selectedGroup = 0;

        __self.BindClicks = function () {

            $('.CriteriaSelections').unbind('click').click(function (event) {
                event.preventDefault();
                if (__self.fnIsTheClickedBoxaGroup($(this))) {
                    TemplateEditor.GroupClicked();
                }
                else {
                    TemplateEditor.CriteriaClicked($(this), __self.selectedGroup);
                }
            });

            $('.groupselected').unbind('click').click(function (event) {
                event.preventDefault();
                __self.selectedGroup = $(this).attr('group-'.length);
                TemplateEditor.SelectGroup(__self.selectedGroup);
            });
        }


        __self.fnGetGroupID = function (Obj) {
            if (__self.fnIsTheClickedBoxaGroup(Obj) == true) {
                return null;
            }
            else {
                //Get parent which is the group
                var ObjParent = Obj.parent();
                var GID = ObjParent.attr('id').substr('group-'.length);
                return GID;
            }
        }

        __self.fnIsTheClickedBoxaGroup = function (Obj) {
            var GetClass = Obj.attr('class');
            if (GetClass == __self.groupClassName) {
                return true;
            }
            else {
                return false;
            }
        }

        return {
            Init: function () {
                __self.BindClicks();
            },
            CriteriaClicked: function (Obj, GroupID) {
                $('<div>').attr({ id: '' }).addClass('selection').text(Obj);
                // text return text, don't jQuery object
                $('<div>').appendTo('#group-' + GroupID);
            },
            GroupClicked: function () {

            },
            SelectGroupClicked: function () {

            },
            UpdateTargetPanel: function () {

            }
        };

    }).call({});

    TemplateEditor.Init();
});

Alternatively, since that variable is a 'constant', just create it outside of the TemplateEditor scope and just inside the ready event.

Does it work if you change it to this.GroupClassName?

Here is the code I am working with:

$(document).ready(function () {

    var TemplateEditor = function () {

        var GroupClassName = 'group';
        var SelectedGroup = 0;

        var BindClicks = function () {
            $('.CriteriaSelections').unbind('click').click(function (event) {
                event.preventDefault();
                if (fnIsTheClickedBoxaGroup($(this))) {
                    TemplateEditor.GroupClicked();
                }
                else {
                    TemplateEditor.CriteriaClicked($(this), SelectedGroup);
                }
            });

            $('.groupselected').unbind('click').click(function (event) {
                event.preventDefault();
                SelectedGroup = $(this).attr('group-'.length);
                TemplateEditor.SelectGroup(SelectedGroup);
            });
        }


        var fnGetGroupID = function (Obj) {
            if (fnIsTheClickedBoxaGroup(Obj) == true) {
                return null;
            }
            else {
                //Get parent which is the group
                var ObjParent = Obj.parent();
                var GID = ObjParent.attr('id').substr('group-'.length);
                return GID;
            }
        }

        var fnIsTheClickedBoxaGroup = function (Obj) {
            var GetClass = Obj.attr('class');
            if (GetClass == GroupClassName) {
                return true;
            }
            else {
                return false;
            }
        }

        return {
            Init: function () {
                BindClicks();
            },
            CriteriaClicked: function (Obj, GroupID) {
                $('<div>').attr({ id: '' }).addClass('selection').text(Obj).appendTo('#group-' + GroupID);
            },
            GroupClicked: function () {

            },
            SelectGroupClicked: function () {

            },
            UpdateTargetPanel: function () {

            }
        };
    } ();
    TemplateEditor.Init();
});

I am trying to access this variable: GroupClassName

This variable is inside this function

var fnIsTheClickedBoxaGroup = function (Obj) {
                var GetClass = Obj.attr('class');
                if (GetClass == GroupClassName) {
                    return true;
                }
                else {
                    return false;
                }
            }

When I run the program it says GroupClassName is undefined. Am I missing something here?

Here is the code I am working with:

$(document).ready(function () {

    var TemplateEditor = function () {

        var GroupClassName = 'group';
        var SelectedGroup = 0;

        var BindClicks = function () {
            $('.CriteriaSelections').unbind('click').click(function (event) {
                event.preventDefault();
                if (fnIsTheClickedBoxaGroup($(this))) {
                    TemplateEditor.GroupClicked();
                }
                else {
                    TemplateEditor.CriteriaClicked($(this), SelectedGroup);
                }
            });

            $('.groupselected').unbind('click').click(function (event) {
                event.preventDefault();
                SelectedGroup = $(this).attr('group-'.length);
                TemplateEditor.SelectGroup(SelectedGroup);
            });
        }


        var fnGetGroupID = function (Obj) {
            if (fnIsTheClickedBoxaGroup(Obj) == true) {
                return null;
            }
            else {
                //Get parent which is the group
                var ObjParent = Obj.parent();
                var GID = ObjParent.attr('id').substr('group-'.length);
                return GID;
            }
        }

        var fnIsTheClickedBoxaGroup = function (Obj) {
            var GetClass = Obj.attr('class');
            if (GetClass == GroupClassName) {
                return true;
            }
            else {
                return false;
            }
        }

        return {
            Init: function () {
                BindClicks();
            },
            CriteriaClicked: function (Obj, GroupID) {
                $('<div>').attr({ id: '' }).addClass('selection').text(Obj).appendTo('#group-' + GroupID);
            },
            GroupClicked: function () {

            },
            SelectGroupClicked: function () {

            },
            UpdateTargetPanel: function () {

            }
        };
    } ();
    TemplateEditor.Init();
});

I am trying to access this variable: GroupClassName

This variable is inside this function

var fnIsTheClickedBoxaGroup = function (Obj) {
                var GetClass = Obj.attr('class');
                if (GetClass == GroupClassName) {
                    return true;
                }
                else {
                    return false;
                }
            }

When I run the program it says GroupClassName is undefined. Am I missing something here?

• javascript
• jquery

Share Improve this question Follow asked Apr 30, 2010 at 19:04 Luke101Luke101 65.4k8888 gold badges244244 silver badges374374 bronze badges 3

• Try alert(GroupClassName) in the fnIsTheClickedBoxaGroup function. I see no reason why GroupClassName shouldn't be set when you get to it. Also, do you accidentally say var GroupClassName multiple times? Do you use incorrect capitalization? – Joey Adams Commented Apr 30, 2010 at 19:24
• OK..when i take var off it works. but i don't understand why its working – Luke101 Commented May 1, 2010 at 2:33
• You could also try seeing if it works in other browsers. Because you don't end your function assignment statements (var x = function(){...}) with semicolons, your code technically has syntax errors and might not work in all browsers. In general, take a look at what JSLint (jslint.) has to say about your code. – Joey Adams Commented May 1, 2010 at 3:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Try this

function fnIsTheClickedBoxaGroup(Obj) {
  var GetClass = Obj.attr('class');
  return (GetClass == GroupClassName);
}

The code you posted works correctly. Try it here and see.

The only change I made for the test is after the call to fnIsTheClickedBoxaGroup:

if (fnIsTheClickedBoxaGroup($(this))) {
    alert('fnIsTheClickedBoxaGroup returned true');
    //TemplateEditor.GroupClicked();
}
else {
    alert('fnIsTheClickedBoxaGroup returned false');
    //TemplateEditor.CriteriaClicked($(this), SelectedGroup);
} 

You're getting the error due to something you haven't shown here. Maybe you're using GroupClassName in an additional location?

$(document).ready(function () {

    var TemplateEditor = (function () {

        var __self = this;

        __self.groupClassName = 'group',
        __self.selectedGroup = 0;

        __self.BindClicks = function () {

            $('.CriteriaSelections').unbind('click').click(function (event) {
                event.preventDefault();
                if (__self.fnIsTheClickedBoxaGroup($(this))) {
                    TemplateEditor.GroupClicked();
                }
                else {
                    TemplateEditor.CriteriaClicked($(this), __self.selectedGroup);
                }
            });

            $('.groupselected').unbind('click').click(function (event) {
                event.preventDefault();
                __self.selectedGroup = $(this).attr('group-'.length);
                TemplateEditor.SelectGroup(__self.selectedGroup);
            });
        }


        __self.fnGetGroupID = function (Obj) {
            if (__self.fnIsTheClickedBoxaGroup(Obj) == true) {
                return null;
            }
            else {
                //Get parent which is the group
                var ObjParent = Obj.parent();
                var GID = ObjParent.attr('id').substr('group-'.length);
                return GID;
            }
        }

        __self.fnIsTheClickedBoxaGroup = function (Obj) {
            var GetClass = Obj.attr('class');
            if (GetClass == __self.groupClassName) {
                return true;
            }
            else {
                return false;
            }
        }

        return {
            Init: function () {
                __self.BindClicks();
            },
            CriteriaClicked: function (Obj, GroupID) {
                $('<div>').attr({ id: '' }).addClass('selection').text(Obj);
                // text return text, don't jQuery object
                $('<div>').appendTo('#group-' + GroupID);
            },
            GroupClicked: function () {

            },
            SelectGroupClicked: function () {

            },
            UpdateTargetPanel: function () {

            }
        };

    }).call({});

    TemplateEditor.Init();
});

Alternatively, since that variable is a 'constant', just create it outside of the TemplateEditor scope and just inside the ready event.

Does it work if you change it to this.GroupClassName?

本文标签： jqueryHow to access a variable outside a function in JavascriptStack Overflow