Question

我的网站上有一个页面，默认显示区域内的所有公园。然后我希望它只显示基于点击区域的特定项目并隐藏所有其他公园。

到目前为止，我有3个地区，例如region-1，region-2和region-3我希望它只显示那些区域内的公园，所以如果我点击region-1的id，它只会显示具有region-1类的公园并隐藏所有其他地区，其他地区也是如此。

让这个问题发挥作用的最大问题是，客户将来可以添加更多区域，并为这些新区域添加更多公园。

所以我需要的是JQuery来获取将来添加的所有区域id并将它们与相关公园配对。

<div id="side-bar" class="pull-left">
    <h2>Parks By Region</h2>
    <ul class="nav nav-pills nav-stacked">
        <li>
            <a href="#region-1">South East England</a>
        </li>
        <li>
            <a href="#region-2">South West England</a>
        </li>
        <li>
            <a href="#region-3">North Wales</a>
        </li>
    </ul>
</div>
<div id="content">
    <div id="contentWrapper">     

        <h1>REGION TEXT</h1>
        <div class="region-1 pull-left">Park 1</div>
        <div class="region-2 pull-left">Park 2</div>
        <div class="region-3 pull-left">Park 3</div>
    </div>
</div>

这是我的JSFiddle帮助您了解我在谈论的内容...... http://jsfiddle.net/y9CV9/

Answer 1

尝试

<div id="content">
    <div id="contentWrapper">     
        <h1>REGION TEXT</h1>
        <div id="region-1" class="region pull-left">Park 1</div>
        <div id="region-2" class="region pull-left">Park 2</div>
        <div id="region-3" class="region pull-left">Park 3</div>
    </div>
</div>

然后

jQuery(function($){
    var $regions = $('#contentWrapper .region').hide();
    $('#side-bar a').click(function(){
        var $target = $($(this).attr('href')).show();
        $regions.not($target).hide()
    })
})

演示：Fiddle

Answer 2

首先，您必须先隐藏所有部门，然后才能在点击时更改其属性。

jQuery(function($){
    var $regions = $('#contentWrapper .region').hide(); //Hide all div initially
    $('#side-bar a').click(function(){ //find the anchor tag
        var $target = $($(this).attr('href')).show(); //change the attribute of current div 
        $regions.not($target).hide()
    })
})

<强> DEMO FIDDLE

Answer 3

我建议你改用data-*，因为它更容易管理：

<div id="side-bar" class="pull-left">
    <h2>Parks By Region</h2>
        <ul class="nav nav-pills nav-stacked">
           <li>
                <a data-region="region-1" href="#region-1">South East England</a>
            </li>
            <li>
               <a data-region="region-2" href="#region-2">South West England</a>
            </li>
            <li>
                <a data-region="region-3" href="#region-3">North Wales</a>
            </li>
        </ul>
</div>

然后你可以使用：

$('#contentWrapper div').hide();
$('#side-bar a').click(function (e) {
    e.preventDefault();
    var region = $(this).attr('data-region');
    $('#contentWrapper div.' + region).show().siblings('div').hide();
});

<强> Fiddle Demo

JQuery根据点击显示/隐藏项目

3 个答案: