CODEWITHSUNDEEP
javascriptjquery
Audi
Audi

Reputation: 71

jquery - passing parameters to functions

This seems like a simple question, but I can't find a simple answer. So I'll start by giving a simple example.

<a href="#" onclick="showmsg('bark')">dog</a>
<a href="#" onclick="showmsg('meow')">cat</a>

And here's a javascript function...

function showmsg(msg) {
  alert(msg);
}

In the above example, additional content (lines of html) may be added without breaking the behavior (the javascript). Each line of html passes its own parameter to the javascript to tell it what message it should display.

If the html is changed to...

<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>

Then how do I write a jquery function that knows which line of html was clicked? In other words...

How do I pass a parameter to a jquery function?

Upvotes: 7

Views: 11731

Answers (7)

DANDYYeah
DANDYYeah

Reputation: 695

if you really want to use this HTML:

<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>

Just write this:

// for dog
$('.showmsg:first-child').click(function() {
  // some crazy code here ..
  return false; // for prevent open href link
});

// for cat
$('.showmsg:last-child').click(function() {
  // some crazy code here ..
  return false; // for prevent open href link
});

or

$(".showmsg:contains('dog')").click(function() {
  // some crazy code here ..
  return false; // for prevent open href link
});

$(".showmsg:contains('cat')").click(function() {
  // some crazy code here ..
  return false; // for prevent open href link
});

and also

$("a:contains('dog')").click(function() {
  // some crazy code here ..
  return false; // for prevent open href link
});

$("a:contains('cat')").click(function() {
  // some crazy code here ..
  return false; // for prevent open href link
});

Upvotes: 1

Cristan
Cristan

Reputation: 14085

With the on function (or the click function starting at jQuery 1.4.3), you can pass event data in a really nice way:

<button id="clickable0">Clickable 0</button>
<button id="clickable1">Clickable 1</button>

<script type="text/javascript">
  for(var i = 0; i < 2; i++)
  {
     $("#clickable"+i).on('click', {item: i}, function(event){
                        alert("clicked on item "+ event.data.item);
                    });
  }
</script>

The main advantage is that the value in event.data.item will be the same as the parameter ("i" in this case) was at the time the onClick was created. This is handy, because in this case, you won't have to worry about the value of i changing while the for loop is running.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630349

In this case I'd use a data- attribute, like this:

<a href="#" class="showmsg" data-sound="bark">dog</a>
<a href="#" class="showmsg" data-sound="meow">cat</a>

And your click handler can fetch it, like this:

$("a.showmsg").click(function() {
  alert($(this).attr("data-sound"));
});

Or in jQuery 1.4.3+

$("a.showmsg").click(function() {
  alert($(this).data("sound"));
});

You can test it out here.

To clarify based on comments: This is perfectly valid in HTML5, in HTML4 it's not valid, but the validator is the only issue you'll have, it'll work in every HTML4 browser. If it wasn't missing in HTML4, it wouldn't have been added in HTML5...I'd personally use it whether it validates or not.

Upvotes: 12

Andy E
Andy E

Reputation: 344517

The data method is a good way to go. If it were me, though, I'd prefer not to have any HTML4 validation errors by defining the sounds in an object map, then pass the text to that map. For instance:

<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>

var sounds = {
    dog: "woof",
    cat: "meow",
    horse: "neigh",
    etc: "etc"
};
$("a.showmsg").click(function() {
    alert(sounds[$(this).text()] || "");
});

Working example: http://jsfiddle.net/AndyE/Q9yWU/

Upvotes: 3

Michel
Michel

Reputation: 9440

If I understood your question correct you can do it like this:

<a href="#" class="showmsg" alt="bark">dog</a>
<a href="#" class="showmsg" alt="meow">cat</a>

$(".showmsg").click(function(){
     var msg = $(this).attr("alt");
     alert(msg);
});

Upvotes: 1

rahul
rahul

Reputation: 187020

What you can do is to set a custom attribute that contains the value that needs to be pased to the function. Something like

<a href="#" class="showmsg" data-attr="bark">dog</a><br>
<a href="#" class="showmsg" data-attr="meow">cat</a><br>

$("a.showmsg").click(function(){
    var attr = $(this).attr("data-attr");
    return false;
});

Upvotes: 3

Scott
Scott

Reputation: 3967

Firstly to allow you to show code place the code in your post, select it and press ctrl+k to put in code block.

Back to question in jquery you use:

$("a.showmsg").click(function() {
    alert($(this).text());
});

You can use "this" to find out what has been clicked

Upvotes: 1

Related Questions