CODEWITHSUNDEEP
javascriptjquery
РАВИ
РАВИ

Reputation: 12155

efficient way of checking which class is clicked using jquery

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

Upvotes: 0

Views: 108

Answers (5)

Mahesh Thumar
Mahesh Thumar

Reputation: 4395

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

Upvotes: 0

MrNobody007
MrNobody007

Reputation: 1837

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

Upvotes: 1

Shiva Avula
Shiva Avula

Reputation: 1836

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

Upvotes: 1

Farkhat Mikhalko
Farkhat Mikhalko

Reputation: 3645

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", .....);

Upvotes: 0

Samuel Liew
Samuel Liew

Reputation: 79032

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

Upvotes: 0

Related Questions