Javascript and variable help

polarx1

New Member
Hello,

I want to add when you click a button something appears but only for the rank you clicked the button on and not all the same button on all the ranks I already have the javascript code just need the part for {$rank} but idk how to do it please help thanks! Im not too good with javascript. If you need anymore information please tell me.
 

Mark

Administrator
Staff member
more information please :) show some specifics so we can easily understand what you are after
 

polarx1

New Member
when you click a button like lets say the stats button instead of going to the stats page I want it to show a box but I have already done this but when I click the button of any rank it shows the box for all of them instead I want it to show the box from the rank you clicked it under.
 

polarx1

New Member
Also this is my javascript code:

Code:
$(".btn-info1").click(function() {
  $(".alert-success").toggle();
});
but I want it to show for only that rank you clicked .btn-info1 on.
 

Basti

Administrator
Staff member
You need to be more specific in the toggle when you call it.
Assuming you use parabola
Code:
<div class="table_top">
    <div class="table_top_title"><span class="rank">#{$rank}</span><a href="{$url}" onclick="out(this,'{$username}');" class="show_banner" title="{$title}" rel="nofollow">{$title}</a></div>
    <div class="table_top_inside_border">
    <div class="table_top_inside"><a href="{$url}" onclick="out(this,'{$username}');" rel="nofollow"><img src="{$banner_url}" alt="{$title}"  class="vistip" title="{$title}"/></a>
        <div class="right badge"><a href="{$list_url}/{$url_helper_a}details{$url_helper_u}{$username}{$url_tail}">
        {$screenshot}<br />
        <img src="{$skins_url}/{$skin_name}/stats.png" alt="{$lng->table_stats}" height="21" width="21" /><br />{$lng->table_stats} <br /><img src="{$skins_url}/{$skin_name}/{$up_down}.png" alt="{$lng->up_down}" /></a>
        </div>
        <p>{$description, length=255}</p>
        {$rankings_custom_fields}
      <div class="catinfo"><em>{$lng->g_category}</em>: <a href="{$list_url}/{$url_helper_cat}{$category_url}{$url_tail}">{$category}</a></div>
    </div>
    </div>
</div>
As you see <div class="table_top"> is the outter most parent, add in some descriptive class like "toggle_filter" to all your members ( table_top_row_premium.html, table_row.html etc etc )
So it becomes <div class="table_top toggle_filter">

Then in your js, before you toggle, you want to get the closest "toggle_filter" class and find "alert-success" within its children
Info:
- closest() , travels up the dom tree to find the given selector
- find(), travels down the dom tree to find the given selector

Code:
$(".btn-info1").click(function() {
  $(this).closest('.toggle_filter').find(".alert-success").toggle();
});
 
Top