简化使用冗余数据的jQuery调用

我有一些代码控制一些

div

s，但是它在不同的链接上只需要一个小的更改就可以重复很多次

如果我单击

#选项1

，则2-5将收缩到0（如果其中任何一个打开），并转到0 反之亦然，如果你点击2（折叠1和其他），但我想不出一个好方法使它更通用，但必须有一种方法

$('#Option1').click(function() {
      var ele = $('#Option1Div');
      ele.animate({
               opacity    : .75,
               width      : '602px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option2Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option3Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option4Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option5Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
});

---

如果您为您的选项指定了一类

选项

，为您的div指定了一类

选项div

，则可以使用以下内容：

$('.options').click(function() {
    var element = $('.option-divs').eq($(this).index());

    element.stop().animate({
        opacity: .75,
        width: '602px'
    }, 5000).siblings().stop().animate({
        opacity: 0.1,
        width: '0px'
    }, 5000);
});​

你可以试试这个

  $('#Option1 , #Option2 ,#Option3 , #Option4 , #Option5').click(function() {
    var ele = $('#' + this.id + 'Div');
    ele.animate({
        opacity: .75,
        width: '602px'
    }, 5000, function() {
        // Animation complete.
    });

    $('[id^="Option"][id$="Div"]').not(ele).animate({
        opacity: 0.1,
        width: '0px'
    }, 5000, function() {
        // Animation complete.
    });
});

---

从技术上讲，由于动画的不透明度、宽度和最终持续时间的值不同，所以不能完全按照常规进行操作

但您可以隔离阵列中所有不断变化的数据，并应用以下通用代码：

    var opacities = [0.75, 0.1, 0.1, 0.1, 0.1];
    var widths = [602, 0, 0, 0, 0];
    var durations = [500, 500, 500, 500, 500];
    var callbacksComplete = [cb1, cb2, cb3, cb4, cb5];

    $('#Option1').click(function() {

        // Assume that 3 arrays have the same size !
        for(var i = 0 ; i < opacities.length ; i++)
        {
            $('#Option' + i + 'Div').animate({
                'opacity' : opacities[i],
                'width' : widths[i]
            }, durations[i], callbacksComplete[i]);
        }
    }

var不透明度=[0.75,0.1,0.1,0.1,0.1]；
变量宽度=[602,0,0,0,0]；
风险值持续时间=[500500500500]；
var callbacksComplete=[cb1、cb2、cb3、cb4、cb5]；
$（'#选项1'）。单击（函数（）{
//假设3个阵列具有相同的大小！
对于（var i=0；i

这很优雅，但我可以更干净吗？因为点击选项2将Option2Div不透明度设置为.75，宽度设置为602，同时减少1（和3-5）要测试上面粘贴的代码..它可以处理5个选项的所有点击事件，这太完美了。非常高效！谢谢！我不需要完全通用的..只是比5个函数的5个调用更高效Arry看起来很不错所有的好主意，但第一个看起来更简单，但看看可能会更高效@nekolx:the approach你正在使用的不是很好。

id

s不应该这样使用。你能解释一下为什么吗？我的意思是没有什么是多余的，它们只使用一次，所以id不是比类更可取吗，特别是当以后像content div这样的东西会有不同的内容时。我的意思是，如果它工作，它没有什么问题，但是通用的解决方案它允许你在不重写JavaScript的情况下添加/删除HTML元素。这确实更有效，而且我喜欢高效，也许我会尝试一下，我唯一真正的习惯是当我动态地改变特定区域中的内容时，包括选项IV、子节1和标题