JQuery показать / скрыть элементы на основе клика

0

У меня есть страница на моем сайте, которая по умолчанию покажет все парки в регионе. Затем мне хотелось бы показать только конкретные предметы на основе щелкнутого региона и скрыть все остальные парки.

До сих пор у меня есть 3 региона с идентификатором, например, регион-1, регион-2 и регион-3. Мне хотелось бы, чтобы он показывал только парки в этих регионах, поэтому, если бы я нажал на идентификатор региона-1, он бы показал только парки с классом региона-1 и скрыть все остальные, это то же самое для других регионов.

Моя самая большая проблема с тем, чтобы это работало, заключается в том, что клиент сможет добавить больше регионов в будущем и больше парков в эти новые регионы.

Так что мне нужен JQuery, чтобы забрать каждый идентификатор региона, который будет добавлен в будущем, и соединить их с соответствующими парками.

<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/

  • 0
    Можете ли вы предоставить JQuery код, чтобы показать нам, что вы пытались до сих пор?
  • 4
    см. jsfiddle.net/arunpjohny/53qXh/1
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

Я бы посоветовал вам использовать 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();
});

Демо-версия скрипта

Поделиться
  • 0
    На самом деле это, вероятно, лучшее решение. Это более семантически, и в каждом регионе будет больше парков, поэтому использование класса вместо идентификатора работает на пользу. Я также удалил # region-1 и т. Д. И просто дал пустой href, который также работает в пользу, поскольку он останавливает движение страницы при нажатии. Я просто хочу поблагодарить вас за то, что вы уделили мне время, это очень помогло! :)
3

Пытаться

<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()
    })
})

Демо: скрипка

Поделиться
  • 0
    Вместо использования $ ($ (this) .attr ('href')) вы можете использовать $ (this.hash).
  • 0
    Кроме того, вы должны отменить поведение по умолчанию, чтобы страница не переходила к идентификатору при изменении фрагмента местоположения.
Показать ещё 1 комментарий
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

Поделиться
  • 1
    Приветствую вас за ответ, он такой же, как у Аруна, но я думаю, что вы оба ответили очень близко. Ваш ответ был полезен, так что спасибо. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню