Как использовать селекторы «это», а не «это» в jQuery - PullRequest
Новая
       14

Как использовать селекторы «это», а не «это» в jQuery

2 голосов
/ 17 марта 2010

У меня есть 4 деления с содержанием, как показано ниже: 

<div class="prodNav-Info-Panel">content</div>
<div class="prodNav-Usage-Panel">content</div>
<div class="prodNav-Guarantee-Panel">content</div>
<div class="prodNav-FAQ-Panel">content</div>

И такой список навигации: 

<div id="nav">
<ul id="navigation">
    <li><a class="prodNav-Info" ></a></li>
    <li><a class="prodNav-Usage" ></a></li>
    <li><a class="prodNav-Guarantee"></a></li>
    <li><a class="prodNav-FAQ" ></a></li>
    </ul>
</div>

Когда страница отображается в первый раз, я показываю все содержимое, выполнив это: 

$('div.prodNav-Usage-Panel').fadeIn('slow');
$('div.prodNav-Guarantee-Panel').fadeIn('slow');
$('div.prodNav-FAQ-Panel').fadeIn('slow');
$('div.prodNav-Info-Panel').fadeIn('slow');

Теперь, когда вы щелкаете элемент списка навигации, он показывает содержимое, по которому щелкнули, и скрывает остальные, например: 

    $('.prodNav-Info').click( function() {
        $('div.prodNav-Info-Panel').fadeIn('slow');
        $('div.prodNav-Usage-Panel').fadeOut('slow');
        $('div.prodNav-Guarantee-Panel').fadeOut('slow');
        $('div.prodNav-FAQ-Panel').fadeOut('slow');
    });

Итак, у меня есть 4 отдельные функции, потому что я не знаю, какой контент отображается в данный момент. Я знаю, что это неэффективно и может быть сделано с помощью нескольких строк кода. Похоже, что есть способ сказать: когда это щелкнуть, спрячьте остальные.

Могу ли я сделать это с чем-то вроде $ (this) и $ (not this)?

Спасибо, Erik

1 Ответ

2 голосов
/ 17 марта 2010

В вашем конкретном случае вы можете использовать метод .sibilings() примерно так: 

$(this).fadeIn().sibilings().fadeOut()

В противном случае, допустим, что у вас где-то хранится набор элементов, который указывает на все ваши элементы: 

// contains 5 elements:
var $hiders = $(".prodNavPanel");

// somewhere later:
$hiders.not("#someElement").fadeOut();
$("#someElement").fadeIn();

Также я бы предложил изменить классы для ваших <div> и <a> на что-то более похожее на: 

<div class="prodNavPanel" id="panel-Info">content</div>
....
<a class="prodNavLink" href="#panel-Info">info</a>

Это дает вам несколько преимуществ перед вашим HTML. Во-первых: ссылки будут иметь полезные ссылки. Второе: вы можете легко выбрать все свои теги <div> / <a>. Тогда вы можете сделать это с помощью jQuery: 

$(function() {
  var $panels = $(".prodNavPanel");
  $(".prodNavLink").click(function() {
     var m = this.href.match(/(#panel.*)$/);
     if (m) {
       var panelId = m[1];
       $panels.not(panelId).fadeOut();
       $(panelId).fadeIn();
       return false; // prevents browser from "moving" the page
     }
  });
});
...