如何在 jQuery 中使用“this”而不是“this”选择器

Question

我有 4 个 div，内容如下：

<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) 之类的东西来做到这一点吗？

谢谢， 埃里克

Answer 1

在您的特定情况下，您也许可以使用类似这样的.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 的优势。首先：链接将有有用的href。第二：您可以轻松选择所有<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
     }
  });
});