Change The Text Of Clicked Element With 'this' In Javascript / Jquery Callback

Question

Can anybody explain is this in the callback. Example. Web page.

Solution 1:

Your first function is an event handler. With Event handlers $(this) automatically refers to the element that was clicked, changed, hovered, etc.. jQuery creates $(this) for you and, while you can't explicitly see it passed into the function it is available to all the code within the click handler's callback.

Your second function is a simple function and is not an event handler therefore jQuery does not create the $(this) reference for you

In your code, you could pass $(this) from your event handler like handleHideShow($(this),$("#p002")); and reference it in your function like function handleHideShow(btn, par). Then, inside handleHideShow, btn will refer to the same element as $(this) referred to in your click handler (see the second snippet below).

But, I would simplify the code alltogether by giving the buttons and paragraphs classes instead of ids and doing this:

$(document).ready(function () {
  $('.article').hide();
  $('.myBtn').click(function(){
    $(this).html( $(this).html() == 'Show' ? 'Hide' :'Show' );
    $(this).nextAll('.article').first().toggle();
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><html><head><scriptsrc="https://code.jquery.com/jquery-1.11.2.js"></script><scriptsrc="myApp.js"></script></head><body><buttontype="button"class="myBtn">Show</button><br/><pclass="article">Some contents...</p><buttontype="button"class="myBtn">Show</button><br/><pclass="article">Other content...</p><!-- more paragraphs --></body></html>

Now, one could argue that this is less efficient as jQuery has to search through more elements to find the paragraph but I believe it to be more robust as you can add as many buttons and paragraphs as you like without worrying about all the sequential ids. And honestly, you'd have to have a pretty giant webpage to see any performance issues.

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("#btn001").click(function () {
    handleHideShow($(this),$("#p001"));
  });
  // button 2 hides/shows second paragraph
  $("#btn002").click(function () {
    handleHideShow($(this),$("#p002"));
  });
});

functionhandleHideShow(btn, par) {
  if (btn.html() === "Show") {
    btn.html("Hide");
  } else {
    btn.html("Show");
  }
  par.toggle();
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><html><head><scriptsrc="https://code.jquery.com/jquery-1.11.2.js"></script><scriptsrc="myApp.js"></script></head><body><buttontype="button"id="btn001">Show</button><br/><pid="p001"class="article">Some contents...</p><buttontype="button"id="btn002">Show</button><br/><pid="p002"class="article">Other content...</p><!-- more paragraphs --></body></html>

Solution 2:

You need to pass the object of button in the function:

Baca Juga

Try this:

functionhandleHideShow(par,that) {
  if ($(that).html() === "Show") {
    $(that).html("Hide");
  } else {
    $(that).html("Show");
  }
  par.toggle();
}

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("#btn001").click(function () {
    handleHideShow($("#p001"),this);
  });
  // button 2 hides/shows second paragraph
  $("#btn002").click(function () {
    handleHideShow($("#p002"),this);
  });
});

Or you try this also:

$(document).ready(function () {
  // hide all articles at the begining
  $(".article").hide();
  // button 1 hides/shows first paragraph
  $("button[id^='btn']").click(function () {
    if ($(this).html() === "Show") {
      $(this).html("Hide");
    } else {
      $(this).html("Show");
    }
    $(this).next().toggle();
  });
});

The above code is optimal and you can add buttons as many as you want.

Solution 3:

The function is called with no special context, and this is not the element. Reference the function instead

$("#btn001").click(handleHideShow);
$("#btn002").click(handleHideShow);

functionhandleHideShow() {
    $(this).html(function (_, html) {
        return html === "Show" ? "Hide" : "Show";
    });

    $('#' + this.id.replace('btn', 'p')).toggle();
}

FIDDLE

JavaScript Square

Change The Text Of Clicked Element With 'this' In Javascript / Jquery Callback

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Change The Text Of Clicked Element With 'this' In Javascript / Jquery Callback"