JQuery fade .not() div，当其他选择时移除淡入淡出

Question

我正在尝试在站点上设置 'team' 页面。我希望功能如下。

单击 "Image A" 并显示 "Bio A"。单击 "Image B" 和 "Bio A" 关闭，"Bio B" 打开。我还希望非活动图像褪色，以便您可以看到哪些生物与哪个爆头相关。我一切正常，一切都对 flexbox 有响应。淡入淡出适用于 first 单击实例，但随后我需要摆脱新选择的单击图像上的 "non-selected" class。最后，如果没有生物是 open/selected，所有淡入淡出都应该消失。

jQuery 的新手，我尝试过的所有方法都无效。 last 行是我最好的猜测是修复，但没有成功。非常感谢任何帮助。

<script>   
$("a").click(function(e) {
    var tClass = $(this).attr("id"),
        content = $("div.toggles." + tClass),
        link = $(this);

    //fades any 'toggle' class without selected id
    $("div.toggles:not('." + tClass + "')").fadeOut("fast");

    //fades any image/'a' that is NOT the clicked one
    $("a").not(link).addClass( "non-selected" );

    content.fadeToggle("fast", function() {});
    e.preventDefault();

    //trying to remove fade on selected image/'a'... removeClass didn't work either
    $("a('#" + tClass + "')").addClass( "bio-selected" );

}); 
</script>

我也尝试了一些类似于下面的东西，但没有成功。

//fades any image/'a' that is NOT the clicked one
$("a").is(link).removeClass( "non-selected" );

结构：

<div class="name profile overlay">
    <a href="#" id="c8"><img></a>
</div>

<div class="name-bio bio toggles c7">

CodePen: http://codepen.io/markrutt/pen/XbvMez

感谢您的任何 help/widsom！

Answer 1

我相信你能找到一种更优雅的方法来做到这一点，但你可以简单地在每个 link 和 then[=29 上添加/删除类 =] 根据需要处理 this。将以下内容添加到点击处理程序的顶部，您就会明白我的意思。

$("a").removeClass( "bio-selected" ); $("a").addClass( "non-selected" ); $(this).removeClass( "non-selected" ); $(this).addClass( "bio-selected" );

有更好的方法可以做到这一点。这只是为了演示。

CodePen: http://codepen.io/anon/pen/aOeJYG

编辑： 正如所指出的，这不会在 bio 关闭时消除淡入淡出。您可以使用 if/else 语句轻松解决该问题。

$("a").click(function(e) { var link = $(this), tClass = link.attr("id"), content = $("div.toggles." + tClass); // We can assume the user wants to close the bio // if it already has the `bio-selected` class if (link.hasClass( "bio-selected" )) { // Reset every link $("a").removeClass( "non-selected bio-selected"); } else { // Set every link as `non-selected` and then // set the proper classes for `this` link $("a").removeClass( "bio-selected").addClass( "non-selected"); link.removeClass( "non-selected").addClass( "bio-selected"); } // Fade any 'toggle' class without selected id $("div.toggles:not('." + tClass + "')").fadeOut("fast"); // Needed to show content content.fadeToggle("fast", function() {}); e.preventDefault(); });

更新的 CodePen： http://codepen.io/anon/pen/aOeJYG

JQuery fade .not() div，当其他选择时移除淡入淡出

JQuery fade .not() divs, remove fade when other selected

jquery

toggle