Question

我一般都是jQuery和javascript的新手，但是由于这些网站的缘故，我正在插手。

我有一个包含六个隐藏div的页面，这些div通过相应的链接与单个ID进行调用。当每个div可见（.fadeIn）时，隐藏当前显示的div（.fadeOut）。

一切正常，但我的代码似乎很长很笨拙。是否有更简单，更短，代码更少的方式来执行相同的任务？

这是我的js：

非常感谢提前。麦克

$(document).ready(function(){

$("#link1").click(function() {
$("#panel2").fadeOut("slow", function() {                       
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel1").fadeIn("slow")});
});
});
});
});
});

$("#link2").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel2").fadeIn("slow")});
});
});
});
});
});

$("#link3").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel3").fadeIn("slow")});
});
});
});
});
});

$("#link4").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel4").fadeIn("slow")});
});
});
});
});
});

$("#link5").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel4").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel5").fadeIn("slow")});
});
});
});
});
});

$("#link6").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeIn("slow")});
});
});
});
});
});

}）;

Answer 1

拥有你的ID可能是这样的：

$.each([1,2,3,4,5,6], function(_, index) {
    $('#link' + index).click(function() {
        $('[id^=panel]').fadeOut('slow', function() {
            $('#panel' + index).fadeIn('slow');
        });
    })
})

Answer 2

$(document).ready(function(){

   $("a[id^='link']").click(function() {
      $("div[id^='panel']").fadeOut("slow");
      $("div#"+this.id.replace('link', 'panel')).fadeIn("slow");
   });
});

Answer 3

这个代码当然可以更高效和灵活，但对于一个简单的6元素示例，如上所述它应该足够了。这主要是作为概念证明而完成的。

我选择以编程方式添加类，但理想情况下，您应该在HTML中添加类。如果是我，我可能也会使用expandos代替id字符串替换。

编辑，修正补充：
顺序动画的递归函数确保在正确的时间处理fadeIn。可能有一种更有效的方法，例如使用计数器，但只有6个元素应该没问题，这更忠实地匹配原始代码。
修复了错误时间的动画处理，例如同时单击多个链接，导致多个面板尝试淡入，停止并完成动画。

jQuery(function($){
    //add links/panels class to all elements whose id begins with link/panel
    $("[id^=link]").addClass("links");
    $("[id^=panel]").addClass("panels");

    $(".links").click(function(e){
        //find all panels, make a normal array, and stop/finish all animations
        var panels=$.makeArray($(".panels").stop(true, true));

        //find panel to show
        var panelShow=$("#"+this.id.replace("link","panel"));

        //recursive function to execute fades in sequence
        function queueFX(queue){
            if(queue.length==0){
                panelShow.fadeIn("slow");
                return;
            }
            $(queue.shift()).fadeOut("slow", function(){
                queueFX(queue);
            });
        }
        queueFX(panels);

        //stop event propogation and default behavior, commented out because you don't seem to want this behavior
        e.preventDefault();
        //e.stopPropagation();
        //return false;
    });
});

Answer 4

最好的方法是使用http://api.jquery.com/toggle/

切换可让你动画一个

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
  });
});

至于缩短代码，我会为你的面板使用类标识符。

识别

等小组

$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {

然后为关联的HTML元素分配一个类

您的jQuery现在可以是$(".panelGroup1").fadeOut...

。 jQuery的类选择器和＃是id Selector。

查看选择器，你可以做一堆其他疯狂的事情

http://api.jquery.com/?ns0=1&s=Selector&go=

Answer 5

很多好的解决方案，我有一般性评论：

每个面板似乎都没有必要拥有唯一的ID。你可能有一个完美的理由这样做，但用单独的选择器对你的面板进行分组是否足够？这将使您的整体代码以及您的jquery更简单，更易于维护。

Answer 6

您可以执行类似

的操作

function fadeElementIn(fadedElement) {
    $("[id^=panel]").fadeOut("slow");
    $(fadedElement).fadeIn("slow");
}

然后：

$(document).ready(function(){

    $("#link1").click(fadeElementIn($("#panel1")));
    $("#link2").click(fadeElementIn($("#panel2")));
    $("#link3").click(fadeElementIn($("#panel3")));
    $("#link4").click(fadeElementIn($("#panel4")));
}

如果你想要一个淡出的元素和一个淡入的元素占据相同的空间，请记住调整你的元素定位

欢呼声

jQuery fadeIn和fadeOut - 交换div

6 个答案: