Question

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?

Answer 1

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.