Onclick change visibility для класса

Question

У меня есть серия кнопок и UL, в которых все элементы списка имеют встроенный стиль отображения: none.

Когда пользователь нажимает кнопку, я хочу сделать видимыми любые LI с определенным классом. В качестве примера, мой код (! В комплекте с нефункционирующих JQuery) выглядит следующим образом:

<script> 
$(document).ready(function() { 
    $('.countrySelect').click(function() { 
     $(.Canada) 
     .css('display','block') 
    }); 
}); 
</script> 

<button type="button" class="countrySelect" name="United-Kingdom">UK</button> 
<button type="button" class="countrySelect" name="European-Union">EU</button> 
<button type="button" class="countrySelect" name="Canada">Canada</button> 

<ul> 
    <li><span class="United-States Hosted">Amazon Flexible Payment System</span></li> 
    <li><span class="United-States Hosted">Amazon Simple Pay</span></li> 
    <li><span class="United-States Canada Onsite">Authorize.net</span></li> 
</ul> 

Answer 1

$('.countrySelect').click(function() { 
     $(".Canada").css('display','block'); 
    }); 

read more о JQuery селекторы

Answer 2

Попробуйте это:

$(document).ready(function() { 
    $('.countrySelect').click(function() { 
     $(".Canada").show(); 
    }); 
}); 

Вы нужны кавычки селектор, и вы можете обнаружить, что show() является чуть более простым (особенно потому, что теги <span> отображают: встроенный по умолчанию, а не display: block).

Answer 3

Вы упускаете цитаты с .Canada здесь. Попробуйте так:

$(document).ready(function() { 
    $('.countrySelect').click(function() { 
     $('.Canada').css('color','red') 
    }); 
}); 

Вот рабочий пример: http://jsfiddle.net/SrpVG/