Question

我有一段代码非常适合使用淡入淡出的简单div交换。

$(".panelswap1").click(function () {
        $(".panelswap1").fadeToggle("slow", function () {
            $(".panelswap2").fadeToggle("slow");
        });
    });

    $(".panelswap2").click(function () {
        $(".panelswap2").fadeToggle("slow", function () {
            $(".panelswap1").fadeToggle("slow")
        });
    });

我的问题是，如果我想在我的项目中添加多个包含交换的div，我必须添加更多行代码。

$(".panelswap1").click(function () {
        $(".panelswap1").fadeToggle("slow", function () {
            $(".panelswap2").fadeToggle("slow");
        });
    });

    $(".panelswap2").click(function () {
        $(".panelswap2").fadeToggle("slow", function () {
            $(".panelswap1").fadeToggle("slow")
        });
    });

    $(".panelswap3").click(function () {
        $(".panelswap3").fadeToggle("slow", function () {
            $(".panelswap4").fadeToggle("slow");
        });
    });

    $(".panelswap4").click(function () {
        $(".panelswap4").fadeToggle("slow", function () {
            $(".panelswap3").fadeToggle("slow")
        });
    });

如果我想要十个交换div /面板，那就是很多jQuery，有没有办法将它简化为更通用，所以我可以在多个实例上使用两个类.panelswap1和2。

HTML

<div class="panelswap1">
                    Content
                </div>

                <div class="panelswap2">
                    Content swap
                </div>

<div class="panelswap3">
                    Content
                </div>

                <div class="panelswap4">
                    Content swap
                </div>

谢谢

Answer 1

假设您的结构类似于：

<div>
   <div class="panelswap1"></div>
   <div class="panelswap2"></div>
</div>
<div>
   <div class="panelswap3"></div>
   <div class="panelswap4"></div>
</div>

你要做的第一件事是摆脱所有的增量金属类并使它们成为常见的类

<div class="panel-group">
   <div class="panelswap"></div>
   <div class="panelswap hidden"></div> <!-- hidden class for page load -->
</div>

然后，您可以为所有

定位一个类和一个单击处理程序

$('.panelswap').click(function(){
    // "this" inside event handler is element in selector collection that event occurs on
    var $panel = $(this).stop(true,true).fadeToggle('slow', function(){
         $panel.siblings('.panelswap').stop(true,true).fadeToggle('slow');
    }); 
});

如果用户在正在进行动画时点击，stop()的使用就是杀死任何现有的动画。

如果外包装有问题..可以调整但是包装是这类重复组的最常用方法

的 DEMO

Answer 2

可能是你可以创建这样的函数

function swap(p1,p2){
    $(p1).click(function () {
        $(p1).fadeToggle("slow", function () {
            $(p2).fadeToggle("slow");
        });
    });
};

jQuery div交换代码问题

2 个答案: