$(this) in javascript

Question

I'm having a problem with using this in js. I have a function that uses this like this:

var refreshRequesterStar = function() {
    $(".rating").raty({
        score: function() { return $(this).attr('data-rating'); },
        readOnly: function() { return $(this).attr('data-readonly'); },
        halfShow: true
    });
};

The rating div is as follow:

<div class="rating" data-readonly="false" data-rating="3.0" style="cursor: default; width: 100px;" title="not rated yet">
<div class="rating" data-readonly="false" data-rating="0.0" style="cursor: default; width: 100px;" title="not rated yet">

This is called by this function:

$("body").ajaxComplete(function(){
      refreshRequesterStar();
      $(".time_to_expire").each(function(){
            setCountDown(this);
      })
      $('select').chosen();
});

I was able to set the score value but I cannot set the readOnly value. When I debugged using firebug, I found that the first this pointed to the div but the second this pointed to window. Where I have been wrong? Note: I don't know much about JavaScript.

More info: I was using raty http://www.wbotelhos.com/raty with rails.

possible duplicate of [JavaScript "this" referce to wrong object](http://stackoverflow.com/questions/9173385/javascript-this-referce-to-wrong-object) and [javascript 'this' scope in jQuery](http://stackoverflow.com/questions/6039487/javascript-this-scope-in-jquery). — Rob W, Jun 22 '12 at 07:47
btw, this is not pure javascript. From the looks and the use of `$`, i would say it's jQuery. Nevertheless, this and scope are a tricky thing in JS, especially for programmer with a more traditional background — cypherabe, Jun 22 '12 at 07:49
It's actually jQuery. I'm sorry that I haven't add the jquery tag. Since it's jquery,I don't think this question is a duplicate. — thd, Jun 22 '12 at 07:52
You have data-readOnly instead of data-readonly in here: return $(this).attr('data-readOnly'); and the attribute is data-readonly. Check it out! — Angel, Jun 22 '12 at 07:55
not offering this as an answer because I'm not sure and my jQuery is rusty...but shouldn't `.attr('data-readOnly')` match `data-readonly="false"` (different cased `o`) ? — cypherabe, Jun 22 '12 at 07:55
Sorry. It's my typo. In the source code, they are both readonly. — thd, Jun 22 '12 at 08:02

Salman A · Accepted Answer · 2012-06-22T08:13:36.907

The documentation and examples indicate that the parameter score and readOnly are supposed to be numeric and boolean, not callback functions. You might want to re-write your code this:

$(".rating").each(function() {
    // inside the function, this refers to the .rating element being iterated
    $(this).raty({
        score:    parseFloat($(this).attr('data-rating')), // see note #1
        readOnly: $(this).attr('data-readonly') == "true", // see note #2
        halfShow: true
    });
});

.attr() returns a string; parseFloat() function is used to convert a string e.g. "2.5" into the number 2.5
== "true" returns boolean true if the attribute value is equal to "true"; returns false in all other cases

Ref:

not a big fan of the unary operator suggestion given here and will also violate jslint validation.. Rather cast it like this: `Number($(this).attr('data-rating');` — Baz1nga, Jun 22 '12 at 08:07

$(this) in javascript

1 Answers1