Question

I’m working with jquery. I have an anchor tag that is generated dynamically in xslt. Each anchor has to open a hidden div and pass different values in the onclick event.

In the hidden div i have 2 different buttons, one for cancel the action other for confirm. The idea is: when I click on confirm button the previus anchor (that was clicked before to show the hidden div) gets other style (I use addClass, works fine). I pass the value $(this) on the click function to create a reference and it works well…

The problem: when I click in different anchors (to show the div), the previous was clicked get the new value. For instance, if I click on the “a” button, shows the div, click on cancel (nothing happens thats good), then I click on “b” button and click on confirm, the “a” and “b” gets the style.

I need only show the style on the selected button but don’t have a clear idea how I can do that.

My code:

function showInfo(team, selectName, selectId, temps, thisid){
    //Create a function that will recieves some values            
 var showInfoLink = thisid; //Asigh a new variable the value of thisid ( $(this) )
 showInfoLink.removeClass("highlighted");

 //Show the component
 $("#com_advanceBet").css('z-index' , '1' );

//in the component is a select, it will show the name on the anchor of the selected item                
 $("select").change(function () {
   var str = "";
   $("select option:selected").each(function () {
   str += $(this).text() + " ";
   });
   showInfoLink.html(str);
 })
 .change();

//once i click here the anchor will have this class 
   $('#com_continueBet').click(function(){
   showInfoLink.removeClass('nostyle');
   showInfoLink.addClass('highlighted');

 //hide the component
  $("#com_advanceBet").css('z-index' , '-999999');
  });               
}

This is the anchor:

<a href="#" onclick="showInfo('{$team}', '{$selectName}', '{$selectId}', '{$temps}', $(this) ); " class="nostyle" ><xsl:value-of select="$pt" disable-output-escaping="yes"/><span class="test" style="font-size:0.65em"><xsl:value-of select="$odds" disable-output-escaping="yes"/></span></a>

In the anchor, I pass the $(this) to the function, but for any reason it has the value for all the previus clicked anchors.

Answer 1

I created a mock version of this on jsFiddle: http://jsfiddle.net/dPZJc/6/

It’s much simplified and appears to be working as it should.