Using a selector "$(this).find()" jQuery inside a javascript function

Question

I'm using jQuery and this is my code for the click event of any labels.

$('.spin span:last-child').click(function(){
 unitPrice = parseFloat($(this).closest('.product').find('.unit-price span').text().substring(3));
 if ( $(this).parent().find($('.custom-input')).val() == "" ) {
 $(this).parent().find($('.custom-input')).val(1);
 inputValue = parseInt($(this).parent().find($('.custom-input')).val());
 subTotal = parseFloat(inputValue * unitPrice).toFixed(2);
 $(this).closest('.product').find('.total-price span').text(subTotal);
 } else if ( inputValue =! "" ) {
 inputValue = parseInt($(this).parent().find($('.custom-input')).val());
 inputValue += 1
 $(this).parent().find($('.custom-input')).val(inputValue);
 subTotal = parseFloat(inputValue * unitPrice).toFixed(2);
 $(this).closest('.product').find('.total-price span').text(subTotal);
 };
});

so , i created a function to optimize the code:

 function getValues(){
 unitPrice = parseFloat($(this).closest('.product').find('.unit-price span').text().substring(3));
 subTotal = parseFloat(inputValue * unitPrice).toFixed(2);
 return subTotal;
 $(this).closest('.product').find('.total-price span').text(subTotal);
 };

and my new block code should be look like this:

$('.spin span:last-child').click(function(){
 if ( $(this).parent().find($('.custom-input')).val() == "" ) {
 $(this).parent().find($('.custom-input')).val(1);
 inputValue = parseInt($(this).parent().find($('.custom-input')).val());
 getValues();
 } else if ( inputValue =! "" ) {
 inputValue = parseInt($(this).parent().find($('.custom-input')).val());
 inputValue += 1
 $(this).parent().find($('.custom-input')).val(inputValue);
 getValues();
 };
});

but my function "getValues" don't work , the selector "$(this).find..." inside a function should be the problem i think, can you guys help to fix that?

Thanks

Answer 1

You need to pass this as an argument to the function:

getValues(this);

and define the function like:

function getValues(element){
 unitPrice = parseFloat($(element).closest('.product').find('.unit-price span').text().substring(3));
 subTotal = parseFloat(inputValue * unitPrice).toFixed(2);
 return subTotal;
 $(element).closest('.product').find('.total-price span').text(subTotal);
};

See How does the "this" keyword work?

Answer 2

Rather than worrying about making this inside getValues, I would suggest altering the function definition to allow which element you're working with to be passed to it.

You also have some errors in your function: returning will end execution if that function, so the line after return will currently not run, and you should always use var to declare variables. You're not using the result of this function, so you really don't need the return statement at all.

function getValues(spanEl) {
 var unitPrice = parseFloat($(spanEl).closest('.product').find('.unit-price span').text().substring(3));
 var subTotal = parseFloat(inputValue * unitPrice).toFixed(2);
 $(spanEl).closest('.product').find('.total-price span').text(subTotal);
 };

and then anywhere you call getValues(), change it to getValues(this);.

Answer 3

You are accessing this variable inside getValues function. but this is not available in function. you should pass this object explicitly. You can do like blow:

function getValues(obj){
 unitPrice = parseFloat($(obj).closest('.product').find('.unit-price span').text().substring(3));
 subTotal = parseFloat(inputValue * unitPrice).toFixed(2);
 return subTotal;
 $(obj).closest('.product').find('.total-price span').text(subTotal);
 };