1

If I have:

function printRangeValue(){
    $(this).prev().children("output").text( $(this).val() );
}
$(document).ready(function(){
    //...
    $("#strStat").printRangeValue();
    $("#conStat").printRangeValue();
});

<label for="strStat">Strength<output id="forStr" for="strStat">12</output></label>
<input type="range" id="strStat" class="stat" name="strStat" min="3" max="20">

Is there a simple way to change the content of the ready function to make $(this) work?

Thanks!

Nishit Maheta
  • 6,021
  • 3
  • 17
  • 32
user5489152
  • 9
  • 1
  • 1
    Are you looking for `jQuery.fn.printRangeValue = function() { ... }`? Or something else? It's a little difficult to tell, because your question asks about "chaining" but you don't actually do any chaining. Your code will not work as written, but you don't mention a total failure to run, so it's difficult to tell for sure what you want. – apsillers Oct 26 '15 at 13:05
  • You want to [create your own plugin](https://learn.jquery.com/plugins/basic-plugin-creation/). – moonwave99 Oct 26 '15 at 13:05
  • Okay, do you need 2 or more functions to call it a chain? If so then I'm definitely wrong about chaining, there wheren't any failurs, it just didn't work. – user5489152 Oct 26 '15 at 13:18

1 Answers1

0

jQuery.fn.extend({
    printRangeValue: function () {
        console.log(this);
        $(this).prev().children("output").text($(this).val());
    }
});

$(document).ready(function () {
    $("#strStat").printRangeValue();
    $("#conStat").printRangeValue();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="strStat">Strength
    <output id="forStr" for="strStat">12</output>
</label>
<input type="range" id="strStat" class="stat" name="strStat" min="3" max="20">

Ref : http://api.jquery.com/jquery.fn.extend/

Kishore Sahasranaman
  • 4,013
  • 3
  • 24
  • 50