Question

我作为Jquery指南写作对象文字之后的问题我无法使用$（this）来访问on on on =＆＃34;＆＃34;。请帮助纠正我的错误。

我的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

试试这个：在onclick函数中应用this。如果你在对象函数中应用它，它只从该对象获取数据

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

您需要传递所需的DOM元素this参考，如下所示：

onclick="(function(){compareInit.comGet();})()";在这里你调用一个匿名函数而不传递任何东西。所以内部this引用意味着匿名函数本身。要实现您的目标，您需要按如下方式传递DOM引用：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

我认为你需要将JQuery文件与网页链接起来像这样

使用对象文字的JQuery不能使用$（this）总是在onclick上取消定义

4 个答案: