Jquery if else 结构单击每个函数

Question

我有6个div，都有一个通用类名“.scene”，并且还有单独的类名“.scene1”，“.scene2”，“.scene3”，“.scene4”，“.scene5”，“ .场景6”。

每个场景都有一个按钮。所有按钮都有一个通用类名“.b”，也有单独的类名“.b1”、“.b2”、“.b3”、“.b4”、“.b5”、“.b6”。

当我单击某个按钮时，所有场景都会按照自己的方向移动，并且始终朝同一方向（屏幕外），除了单击其按钮的那个场景。异常场景缩放至 100% 宽度和高度，并且顶部和左侧为 0。

目前，我分别声明每个按钮的单击功能（在本例中，“.scene3”的按钮意味着“.b3”按钮被单击，因此其父按钮停留在屏幕中，并缩放到屏幕尺寸） :

$('.b3').click(function(){
    $('.scene1').delay(200).animate({'left':'100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene2').delay(200).animate({'left':'-100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene3').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
    $('.scene4').delay(300).animate({'top':'150%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene5').delay(250).animate({'left':'-100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene6').delay(200).animate({'left':'-100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
});

如何编写更短的代码（在通用 .b click 下声明所有代码）而不是声明每个单独的 .b click 函数？

我想到了类似的事情，但 Dreamweaver 已经在我的代码中显示了错误，并且这种多重 if else 结构超出了我的能力，因为我不专业：

HTML 结构：

<main>
    <section class="scene scene1">
        <div class="b b1">
    </section>
    <section class="scene scene2">
        <div class="b b2">
    </section>
    <!-- and so on...-->
</main>

Jquery 代码：

$('.b').click(function () {
    $('.scene').each(function(){
        if ($(this).hasClass('.scene1')) {
                $('.scene1').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
        }
        else {
            $('.scene1').delay(200).animate({'left':'100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
        }
        else if ($(this).hasClass('.scene2')) {
                $('.scene2').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
        }
        else {
            $('.scene2').delay(600).animate({'left':'-100%'}, 1700, 'easeInOutCubic').delay(200).fadeOut(1200);
        }
        else if ($(this).hasClass('.scene3')) {
                $('.scene3').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
        }
        else {
                $('.scene3').delay(300).animate({'top':'150%'}, 1700, 'easeInOutCubic').delay(200).fadeOut(1200);
        }
        // ...and so on...);
    });
});

Answer 1

要确定“活动”场景，您可以使用

.closest

例如（给定提供的 HTML）：

$('.b').click(function () {
    $(this).closest(".scene").delay(200).animate({'top':0,'left':0...
});

那么对于其他场景，您只需确保它不是“活动”场景，您可以使用

.not(thisScene)

，例如：

$(".b").click(function() { 
  var thisScene = $(this).closest(".scene");
  
  thisScene.css("border-color", "rebeccapurple");
  
  $(".s1").not(thisScene).css("border-color", "red");
  $(".s2").not(thisScene).css("border-color", "green");
  $(".s3").not(thisScene).css("border-color", "yellow");
  $(".s4").not(thisScene).css("border-color", "pink");
});

<div class='scene s1'><button class='b'>btn</button></div>
<div class='scene s2'><button class='b'>btn</button></div>
<div class='scene s3'><button class='b'>btn</button></div>
<div class='scene s4'><button class='b'>btn</button></div>

在本例中，我使用了边框颜色，在本例中，它可能出现在活动边框的末尾，但在您的情况下，每个边框的动画效果都不同，因此请替换

.css("border-color"..

而不使用不同的动画.

这就是您需要的所有代码，没有

.each

也没有

if-else