javascript - 创建 JQuery div 类过滤器不起作用

Question

我正在尝试使用 JQuery 制作一个过滤器，该过滤器隐藏所有 div，然后仅显示 div，具体取决于其中名为“品牌”的类，我设法让它隐藏所有 div，但它不会显示与类。

我在声明中添加的警报正在显示，所以我认为这可能与父节目有关，有人有任何想法吗？

html:

<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right" title="" data-original-title="">
    <div class="section-features" style="display: none;">
        <p><i class="icon-star"></i> protective, waterproof lid</p>
        <p><i class="icon-star"></i> enhanced wooden coating</p>
        <p><i class="icon-star"></i> long lasting materials</p>
        <p><i class="icon-star"></i> 2 year warranty</p>
        <p><i class="icon-star"></i> includes durable bag</p>
    </div>

    <div class="brand tp" style="display: none;"></div>
    <div class="price" style="display: none;"> £47.99</div>
    <a href="Garden-Games-Picnic-Table-Sandpit-6407.html">
        <img src="picnic_table_sandpit.jpg" title="Garden Games Picnic Table Sandpit" alt="Garden Games Picnic Table Sandpit" width="220">
        <h3 align="center">Garden Games Picnic Table Sandpit</h3>
        <p align="center">
            <span> was: £69.99</span>
            <span> Now:  £47.99</span>
            <span class="button">More Info</span>
        </p>
        </a>
    <a name="a6407"></a>
</div>

/\大约有 20 个这样的 div，具有不同的品牌类别示例 class="brand garden"

J 们:

function brand(string){
    var brand = string;
    $('.section-link').hide();
    if ($('.section-link').children('.brand').hasClass(brand)) {
        alert(brand);
        $(this).parent().show();
    }
}

我也在通过 chrome url 栏进行测试 javascript: brand("tp");

非常感谢任何帮助， 西蒙

Answer 1

你需要在这里使用多个选择器，因为你需要获取同样具有指定类的 .brand 元素

function brand(string){
    var brand = string;
    $('.section-link').hide();
    $('.section-link').children('.brand.' + brand).parent().show();
}

演示:Fiddle