efficient way of checking which class is clicked using jquery

Question

I want to know the most efficient and good practice on accomplishing the following. The case is simple: if you click prev link decrease pagenum or increment if you click next link.Then send it to a function along with its parent data.

I know how to do this by doing two different function for on, but i want a simple, and faster approach.

Html:

 <div>
      hello world
    <a class="prevpg>Previous</a>
    <a class="nextpg">Next</a>
   </div>

javascript:

   $(document).on('click', '.prevpg, .nextpg', function(){
     var element = $(this).parent('div').text();  
//    if ,prevpg was clicked
        somefunction(pagenum--, element)
//    else if .nextpg clicked
       somefunction(pagenum++,element)
    })



 function somefunction(pagenum, data ){
  var test = true; 
  if(data == 'hello world'){
     test = false; }
    $.ajax({
        url: 'search',
        type: 'GET',
        data: {'pagenumber':pagenum, testdata: test} ,
        dataType: 'json',
        success: function(res){
            $('body').append(res.data);
     }
     });
    }

why use the parent div? probably you could try if($(this).attr('class') === "prevpg") — Michael Mao, Feb 12 '14 at 04:36
everything in the html is dynamic. I need the content of the parent div to be passed into another function. — РАВИ, Feb 12 '14 at 04:44
@ravitadi Can you check and see if my answer solves your question. — Shiva Avula, Feb 12 '14 at 05:23
@ravitadi Is the someFunction() mandatory or you can embed the function code into the event handler code. — Shiva Avula, Feb 12 '14 at 05:39

MrNobody007 · Answer 1 · 2014-09-11T03:30:06.403

In this code, there is typo:

 <div id="results">
  hello world
<a class=".prevpg">Previous</a>
<a class=".nextpg">Next</a>

correct it to:

<a class="prevpg">Previous</a> //remove "." for class names

Now for actual question you can know which class was clicked by using:

$(this).hasClass("prevpg");

Make use of switch or else if ladder to invoke the appropriate function if you have more than 2 conditions to check. For your code only 2 cases hence if else will do.

$(document).on('click', '.prevpg, .nextpg', function(){
 var element = $(this).parent('div').text();  
 if($(this).hasClass("prevpg"))
    somefunction(pagenum--, element)
 else
   somefunction(pagenum++,element)
});

Shiva Avula · Answer 2 · 2014-02-12T05:59:43.460

1

Consider this example demonstrating with inline onClick events.

HTML

<div>
  hello world
  <a class="prevpg" onClick="someFunction('prev', this)">Previous</a>
  <a class="nextpg" onClick="someFunction('next', this)">Next</a>
</div>

JS

function somefunction(action, el) {

    if(action == 'prev') pagenum--;
    else pagenum++;

    var data = $(el).parent('div').text();

    // AJAX call
}

EDIT (Only JS Solution)

$('.prevpg, .nextpg').on('click', function(){

    if($(this).attr('class') == 'prevpg') pagenum--;
    else pagenum++;

    var data = $(this).parent('div').text();

    // AJAX call
    // If you need some function call it like this
    // someFunction(pagenum, data);
});

edited Feb 12 '14 at 05:59

answered Feb 12 '14 at 05:21

Shiva Avula

1,836
1
20
29

dont use inline javascript, because of different behaviour in different browsers. – Farkhat Mikhalko Feb 12 '14 at 05:25
Thank you for the answer @Script Shiva. Great answer, unfortunately, for my case the html is dynamic (made by javascript) so it won't work.. – РАВИ Feb 12 '14 at 05:27
@FUserThrowError Can you explain it please? I don't find any difference for a simple onClick in any browsers. They are all working the same. – Shiva Avula Feb 12 '14 at 05:27
checkout this http://stackoverflow.com/questions/19002690/why-inline-javascript-is-bad – Farkhat Mikhalko Feb 12 '14 at 05:32
@FUserThrowError I accept your link, but in this case this code is present only in this page as well as only at two places in a page. There is no maintainability issues clearly. And I don't see any browser compatibility as you stated in your link. Anyway thanks for the reply. – Shiva Avula Feb 12 '14 at 05:34

score 0 · Accepted Answer · edited Sep 11 '14 at 04:10

0

Try like this :

  $(document).on('click', '.prevpg, .nextpg', function(){
     var element = $(this).parent('div').text();  
      // When prevpg was clicked
      if($(this).hasClass("prevpg")){
        somefunction(pagenum--, element)
      }
     else{
      // When nextpg was clicked
       somefunction(pagenum++,element)
      }
    })

edited Sep 11 '14 at 04:10

MrNobody007

1,827
11
32

answered Feb 12 '14 at 04:36

Mahesh Thumar

4,257
5
22
30

Samuel Liew · Answer 4 · 2014-02-12T05:09:38.687

There are several problems with your html/code, I've cleaned them up and added the answer.

I also assumed you intend to get the value "hello world", instead of "hello world Previous Next"

HTML

<div id="results">
    hello world
    <a class="prevpg">Previous</a>
    <a class="nextpg">Next</a>
</div>

js

pagenum = 0;

$(document).on('click', '.prevpg, .nextpg', function () {
    var element = $(this).parent('div').contents().first().text();
    if ($(this).hasClass('prevpg')) {
        pagenum--;
        somefunction(element);
    }
    else if ($(this).hasClass('nextpg')) {
        pagenum++;
        somefunction(element);
    }
});

function somefunction(data) {
    var test = !(data == 'hello world');
    $.ajax({
        url: 'search',
        type: 'GET',
        data: {
            'pagenumber': pagenum,
            testdata: test
        },
        dataType: 'json',
        success: function(res) {
            $('body').append(res.data);
        }
    });
}

thanks @Samuel for your answer, Is this a good way of approaching to what i am trying to do? — РАВИ, Feb 12 '14 at 04:51

score 0 · Answer 5 · answered Feb 12 '14 at 05:24

I think it can be possible done with this (using data-attributes)

<div>
  hello world
  <a class="control" data-move="-1">Previous</a>
  <a class="control" data-move="+1">Next</a>
</div>

And js

$(".control").on("click", function(e){
  var t_number = parseInt($(this).attr("data-move")),
      element  = $(this).parent('div').text();

  someFunction(total + t_number, $(this));
  return false;
});

If you are bind events to document use namespaces.

$(document).on("click.HANDLE_CLICK_LINK", .....);

efficient way of checking which class is clicked using jquery

5 Answers5