0

HTML

120:    $seperator= "<SEPERATOR>";
121:    echo "<div class='optionBox' onClick='selectOther(this.id)' id='".$OPid.$seperator.$OPlayer2ID."' >".$OPlayer2nam."</div>";

Jquery

function selectOther(evalOTHERID){
   $("div[.*'selected'#'"+evalOTHERID+"']").css('opacity', '1');
   $("div[id='"+evalOTHERID+"']").css('opacity', '0.08');
   $("div[id='"+evalOTHERID+"']").addClass( "selected" );   
}

the HTML line #120 and #121 are in a while loop to generate selectable boxes, something like the one bellow

=====   =====   =====
=43 =   =44 =   =45 = 
=====   =====   =====

the opacity will be changed to 0.08 on click on each selectable boxes, My problem is how to deselect the previously selected one ? I tried to use the suggested solutions on jQuery: select an element's class and id at the same time? but it seems that there is something wrong with my integration.

I also tried to change it to:

    $("div[class*='selected'][id='"+evalOTHERID+"']").css('opacity', '1');

But it still won't change the opacity of the selected one back to 1.

I have googled the question tried to find an answer for it, it's true that there are bunch of solutions but I am new in web programming, and not able to integrate the correctly. there is no error in console by the way.

Please tell me in what way I can get the ID of the element that has class selected? I will be appreciated.

Please help me to edit the question if it isn't really clear, I'll learn more things then. Appreciated.

Community
  • 1
  • 1
Kissa Mia
  • 297
  • 8
  • 23
  • Make a fiddle to illustrate the problem. http://jsfiddle.net/ – Mosho May 25 '14 at 15:00
  • ok ill make now, I have the data coming from my DB and PHP HTML mixed, how to put this kind of code in fiddle, is a new question – Kissa Mia May 25 '14 at 15:01
  • It's a matter of your jQuery selector not working, you don't need to generate the page, just make an example of what the page would look like when you call the function. – Mosho May 25 '14 at 15:12
  • yes its the jQuery selector, all I need to do is to find the ID of the element has class like "selected" – Kissa Mia May 25 '14 at 15:28

1 Answers1

1

You can simplify things a little bit by passing the dom node like:

onClick='selectOther(this)'

Then we wrap it in jQuery $(elem) and solve the problem:

function selectOther(elem){
   $(elem).toggleClass("selected");

    if( $(elem).hasClass("selected") ){
        $(elem).css('opacity', '0.08');
    } else {
        $(elem).css('opacity', '1');
    } 

}
Wilmer
  • 2,511
  • 1
  • 14
  • 8