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）和$（不是这样）之类的东西吗？

谢谢，埃里克

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提供了一些优势。首先：链接将有有用的hrefs。第二：您可以轻松选择所有<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
     }
  });
});

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

1 个答案: