Question

我正在尝试在网站上设置“团队”页面。我希望功能如下。

单击“图像A”和“生物A”显示。点击“图像B”，“生物A”关闭，“生物B”打开。我还希望非活动图像褪色，这样你就可以看到生物与哪个爆头有关。我把它全部工作，一切都响应flexbox。淡入淡出适用于第一个点击实例，但是我需要删除新选择的点击图像上的“未选择”类。最后，如果打开/选择 no bio，则所有淡入淡出应该消失。

jQuery的新手，我尝试过的一切都没有用。最后行是我最好的解决方法，但没有做到这一点。非常感谢任何帮助。

<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

感谢您的帮助/ widsom！

Answer 1

我确信您可以找到更优雅的方式来执行此操作，但您只需在每个链接上添加/删除类，然后根据需要然后处理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淡出.not（）div，当其他选中时删除淡入淡出

1 个答案: