javascript - 使用对象文字的 JQuery 不能在 onclick 上使用 $(this) always undefine

Question

我的问题是在按照 Jquery 指南编写为对象文字后，我无法使用 $(this) 在 onlick=""上访问 self。请帮助纠正我的错误。

我的html

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

我的

   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>