jquery - Onclick 更改类的可见性

Question

我有一系列按钮和一个 UL，其中所有列表项都具有内联样式 display: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');
    });

阅读更多关于 jQuery 选择器的信息

Answer 2

尝试这个：

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

您需要在选择器周围加上引号，并且您可能会发现 show() 稍微简单一些（特别是因为<span>标签默认为 display: inline，而不是 display: block）。

Answer 3

你在这里错过了报价.Canada。以这种方式尝试：

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

这是工作示例：http: //jsfiddle.net/SrpVG/