使用對象字面量的JQuery不能使用$（this）onclick總是undefine

Question

我的問題寫成對象字面量爲jquery指南我不能使用$（this）來訪問onlick =「」。請幫助糾正我的錯誤。

我的HTML

<a 
data-id="<?=$product_id?>" 
class="compare product-<?=$product_id?>" 
onclick="(function(){compareInit.comGet();})()" 
></a> 

我的js

var compareInit = { 

    /* Store Item Compare */ 
     comGet: function() { 

      var e = $(this); 
      var item_id = e.data('id'); 
      var item_image = e.find(".compare-hidden-image").val(); 
      var item_name = e.find(".compare-hidden-name").val(); 
      var count_item = $(".compare-item").length; 
      var item_dialog = $(".compare-tray-dialog"); 
      var compare_button = $(".compare-tray-item"); 
      item_dialog.show(); 

      if (count_item > 1) { 
      } else { 
      $(".product-"+ item_id).css("color", "red").attr('onclick',''); 
      } 
      if (count_item === 0) { 
      compare_button.removeClass('activate').addClass('deactivate'); 
      } else { 
      compare_button.removeClass('deactivate').addClass('activate'); 
      } 
      $('.compare-remove').on("click", function() { 
      var rem_id = $(this).data('id'); 
      $("." + rem_id).remove(); 
      $(".product-" + rem_id).css("color", "#fff").attr('onclick','(function(){compareInit.comGet();})()'); 
      compare_button.removeClass('activate').addClass('deactivate'); 
      }); 
     } 
    }; 

預先感謝。

Answer 1

您可以從onclick事件中傳遞this標識符，然後使用除this之外的名稱（如elem）作爲函數的參數訪問它。

var compareInit = { 
 

 
    /* Store Item Compare */ 
 
    comGet: function(elem) { 
 
    console.log("working"); 
 
    var e = $(elem); 
 
    var item_id = e.data('id'); 
 
    var item_image = e.find(".compare-hidden-image").val(); 
 
    var item_name = e.find(".compare-hidden-name").val(); 
 
    var count_item = $(".compare-item").length; 
 
    var item_dialog = $(".compare-tray-dialog"); 
 
    var compare_button = $(".compare-tray-item"); 
 
    item_dialog.show(); 
 

 
    if (count_item > 1) {} else { 
 
     $(".product-" + item_id).css("color", "red").attr('onclick', ''); 
 
    } 
 
    if (count_item === 0) { 
 
     compare_button.removeClass('activate').addClass('deactivate'); 
 
    } else { 
 
     compare_button.removeClass('deactivate').addClass('activate'); 
 
    } 
 
    $('.compare-remove').on("click", function() { 
 
     var rem_id = $(this).data('id'); 
 
     $("." + rem_id).remove(); 
 
     $(".product-" + rem_id).css("color", "#fff").attr('onclick', '(function(){compareInit.comGet();})()'); 
 
     compare_button.removeClass('activate').addClass('deactivate'); 
 
    }); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-id="3636" class="compare product-3636" onclick="compareInit.comGet(this)">Testing</a>

Answer 2

試試這個：應用this的onclick函數內部。如果你申請在此目標函數的從那個對象只

var compareInit ={ 
 
    comGet : function(that){ 
 
           console.log(that.innerHTML) 
 
          } 
 
        }

<a onclick="compareInit.comGet(this)">hello</a>

數據

備選：

如果得到整個對象的this嘗試用類似下面。它的收益就像一個jQuery對象$(element).html()

var compareInit = function(that){ 
 
    return { 
 
    comGet : function(){ 
 
          console.log(that.innerHTML) 
 
         } 
 
      } 
 
    }

<a onclick="compareInit(this).comGet()">hello</a>

Answer 3

我認爲你需要連接JQuery的文件與網頁 這樣的

Answer 4

您需要傳遞您所需的DOM元素的this參考信息，如下所示：

onclick="(function(){compareInit.comGet();})()";在這裏你正在調用一個匿名函數而不會傳遞任何東西給它。所以裏面有this引用意味着匿名函數本身。爲了實現自己的目標，你需要通過DOM參考如下：

var compareInit = { 
 

 
    /* Store Item Compare */ 
 
    comGet: function(thisRef) { 
 
    alert($(thisRef).text()); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="mydiv" onclick="(function(thisRef){compareInit.comGet(thisRef);})(this)">Click Me!</div>