$('.more').click(function test(id) {
$('#MoreFriendInfo'+id).toggle();
});
I made this, function test(id), now how should i make the link right in html/php in order to grab the id? I tried this, but it doesnt work:
<a class='more' href="javascript:void(0);" onclick='test(<?php echo $showInfo["bID"]; ?>)'>mer</a>
In firebug i get "test isnt defined"
In all of these, we're removing the onclick from the markup:
You can use a data attribute, like this:
<a class='more' href='#' data-id='<?php echo $showInfo["bID"]; ?>'>mer</a>
Then grab it in your .click() handler, like this:
$('.more').click(function () {
$('#MoreFriendInfo'+$(this).attr('data-id')).toggle();
});
Alternatively if it's in another container forget the IDs and find it relatively, for example if the markup was like this:
<div class="container">
<a class='more' href="#">mer</a>
<div class="moreFriendInfo">Content</div>
</div>
You could do it like this:
$('.more').click(function () {
$(this).closest('.container').find('.moreFriendInfo').toggle();
});
(In this case you can actually use .siblings(), but it's meant to be a more general approach)
data- prefix, other than that yes, whatever you want, they don't do any harm in HTML4, and they're actually part of the spec in HTML5.The way you are defining it, test(id) is an inner function that is only scoped within .click().
Note that when you use .click(), you are effectively defining onclick. You don't need to add it to the markup also.
Rather than passing the id, I would design the markup in such a way that the elements were placed in such a way that I could use selector context to pass a starting point for the selector.
$('.more').click(function () { $('.moreFriendInfo',this).toggle(); });
class="moreFriendInfo" element inside the anchor, which doesn't appear to be the case :)
$(this).siblings() or $(this).closest('selector').find('selector') is what I was talking about.this context selector is hardly ever applicable in a "view more" context....I've never seen the "more" also contained inside the link :) (though it's surely possible...)Nick's answer is almost perfect, but I'd use "rel" instead of "data-id" unless data-id is a valid HTML attribute.
data-anything is reserved for those attributes you wish were there but never had :)