在javascript函數中使用選擇器“$（this）.find（）”jQuery

Question

我正在使用jQuery，這是我的任何標簽點擊事件的代碼。

$('.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 ...”應該是我認為的問題，你們可以幫助解決這個問題嗎？

謝謝

Answer 1

您需要this作為參數傳遞給函數：

getValues(this);

並定義如下函數：

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

請參閱“this”關鍵字如何工作？

Answer 2

而不是擔心使this里面getValues ，我會建議改變函數定義，允許你和要傳遞給它的工作哪個元素。

您的函數中也有一些錯誤：如果該函數return將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()任何地方，將它改為getValues(this); 。

Answer 3

您正在getValues函數中訪問this變量。 但是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);
  };