CODEWITHSUNDEEP
jquery
kumo99
kumo99

Reputation: 133

jQuery variable as a selector not working

I'm trying to get an option value if clicked, and assign it to variable. Then this variable is called as a part of a selector to hide an element. I'm using this code but it didn't work if I use the variable:

     $("#State ul li").live('click', function (event) {
    var currentstate = $(this).children('a').html();

    if ( $(this).hasClass("selected") ) {
        $("#state_"+currentstate).show();
    };

 });

I have a div#state_arizona with display: none, and I want this div to show when the specific state is selected.

If I try the following the div shows without a problem:

if ( $(this).hasClass("selected") ) {
$("#state_arizona).show();
};

this is the ul html: 

<ul>
 <li>
     <a href="#" class="ajax-filter-label">
        <span class="checkbox"></span> Alaska </a>
 </li>
</ul>

Any help?

Upvotes: 1

Views: 2126

Answers (2)

Jamund Ferguson
Jamund Ferguson

Reputation: 17014

A few things.

If you have the ability to restructure your HTML do this:

<ul>
  <li>
    <a href="#" class="ajax-filter-label" data-state="alaska">
    <span class="checkbox"></span> Alaska </a>
 </li>
</ul>

Then in your JS you can use .data to get the value of state without wondering what it will look like:

$("#state_"+ currentstate.data('state')).show();

Upvotes: 0

Minko Gechev
Minko Gechev

Reputation: 25682

Try this:

$("#State ul li").live('click', function (event) {
    var currentstate = $(this).children('a').text();

    if ($(this).hasClass("selected")) {
        $("#state_" + $.trim(currentstate).toLowerCase()).show();
    };
});

Notice that the selector by id is case-sensitive.

Upvotes: 3

Related Questions