2

I want to make automate color parent changer in my js.

here is my html :

<div id="parent">
    <div id="target" >
        traget
    </div>
</div>

And here is my js :

function ColorBox(target_id, btn) {

    this.parent = $("#" + target_id).parent();

    this.color = $(this.parent).append('<div class="color" >ops</div>');
    $(this.color).append('<button class="change" value="' + btn + '">' + btn + '</button>');

    this.ChangeColor = function (elm_id) {
        $(this.parent).css('background', $(elm_id).val());
        return true;
    }
    // here my problem start
    $("#" + $(this.parent).attr('id') + " .change").bind('click', function () {
        // how I can do it in here.
        ColorBox.ChangeColor($(this));
    });

}

$(document).ready(function () {
    ColorBox('target', 'red');
});

I add some element to target parent and I want when clicked on change class the ColorBox.ChangeColor execute and but in bind method I can't use this.ChangeColor.

Now how I can do it ?

Improve this question

2 Answers 2

Reset to default
4

Try keeping the function's scope separate by assigning this to a variable (e.g. self). This will avoid any issues with accessing function variables and functions inside different scopes.

Here's a working demo: http://jsfiddle.net/37zq5/10/

Here you can see the code changes I made: 

function ColorBox(target_id, btn) {

    var self = this;

    self.parent = $("#" + target_id).parent();
    self.color = self.parent.append('<div class="color" >ops</div>');
    self.color.append('<button class="change" value="' + btn + '">' + btn + '</button>');

    $("#" + self.parent[0].id + " .change").on('click', function () {
        self.parent.css('background', this.value);
    });

};

$(document).ready(function () {
    new ColorBox('target', 'red');
    new ColorBox('target2','lime');
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Instead of self I often see that used. It's just important to keep it consistent.
@k0pernikus - you're correct, you can assign it to whatever you're comfortable with. Personally, I prefer self but that is just as valid.
This have one problem if I use in two element don't answer or example : ColorBox('target','red') ; ColorBox('target2','lime') ; it is do on second only.
@MahdiParsa - remember to use new, here it is working: jsfiddle.net/37zq5/7
1

Personally I would probably do it this way. It's a bit of a different approach; you don't need this, you don't need new, and it's less code:

function ColorBox(target_id, btn) {
    var $parent = $("#" + target_id).parent();
    var $color = $('<div class="color">ops</div>').appendTo($parent);
    var $button = $('<button class="change" value="' + btn + '">' +
            btn + '</button>').appendTo($color);

    $button.on( 'click', function (event) {
        $parent.css('background', $button.val());
    });
}

$(document).ready(function () {
    ColorBox('target', 'red');
});

Whether you take this approach or do something more like @Joe's answer, there is one thing you should definitely change to work like I have it in this code. Your parent and color variables are both already jQuery objects; there is no need to wrap them in additional $() calls when you use them. So change the names of these variables to include the $ prefix as a reminder that they are jQuery objects, and then just use them directly where you need them instead of the extra $() wrapper.

If you use self as in @Joe's answer, then it would be code like:

self.$parent = $("#" + target_id).parent();
self.$color = self.$parent.append(...);

The $ prefix on these names isn't necessary, but it's a common convention to indicate a variable or property that is a jQuery object. It helps keep straight whether you need to use another $() around it.

Also, be aware that your parent and color variables are the same element. It looks like you're expecting color to be the <color> element, but it isn't. I changed the code so it is the <color> element.

Improve this answer

2 Comments

Thanks for your guide. your answer have good notes for me . :)
Glad to help. That's why it's great to get answers from more than one person; each one has something different to contribute to the conversation. Keep up the good work!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.