使用对象文字的JQuery无法使用$（this）始终在onclick上取消定义

Question

my problem after write as object literal as Jquery guide i can't using $(this) to access self on onlick="". please help correct my mistake.

my html

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

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

Thank in advance.

Answer 1

You can pass the this identifier from the onclick event and then access it under a name other than this such as elem as a parameter of your function.

 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

Try this: apply the this inside the onclick function .If you apply this in object function its get the data from that object only

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

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

Alternate:

If get the this from whole object try with return like below .its like a jquery object $(element).html()

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

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

Answer 3

You need to pass-on the your required DOM element's this reference as follows:

onclick="(function(){compareInit.comGet();})()" ; here you are invoking an anonymous function without passing anything to it. So there inside it this reference means that anonymous function itself. To achieve your goal you need to pass DOM reference as follows:

 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> 

Answer 4

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