Question

我有一系列按钮和UL，其中所有列表项都具有内联显示样式：无。

当用户点击某个按钮时，我想让任何具有某个类的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/

Onclick更改了类的可见性

3 个答案: