javascript関数内のセレクタ "$（this）.find（）" jQueryの使用

Question

私はjQueryを使用しています。これはどのラベルのclickイベントのコードです。

$('.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); 
    }; 
}); 

ので、私はコードを最適化するための関数を作成しました：

 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); 
     }; 

をし、私の新しいブロックコードがあることのようになります。

$('.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(); 
    }; 
}); 

が、私の機能 "でgetValues" ドン'$（this）.find ...'という関数内のセレクタが私が思う問題であるはずです。あなたはそれを修正するのに役立つでしょうか？以下のような

getValues(this); 

と機能を定義します：あなたが関数の引数としてthisを渡す必要があり

おかげ

Answer 1

よりもむしろ心配を参照してください。 thisの作成についてide getValues、関数定義を変更して、どの要素を渡すことができるようにすることをお勧めします。

returnこの関数の実行にはいくつかのエラーがあります。したがって、return以降の行は現在実行されません。したがって、変数を宣言するには常にvarを使用してください。この関数の結果を使用していないので、実際にはreturnステートメントはまったく必要ありません。

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); 
    }; 

、その後、どこでも、あなたはgetValues(this);に変更し、getValues()を呼び出します。

Answer 2

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); 
}; 

はHow does the "this" keyword work?

Answer 3

this内の変数getValuesにアクセスしています。 thisは機能しません。このオブジェクトを明示的に渡す必要があります。 あなたは吹くようにすることができます：

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); 
    };