0

当我为客户做网站时，我经常收到要求有一个双面布局的请求，左侧的按钮会导致右侧的 div 适当地淡入和淡出。很长一段时间以来，我一直在写每个案例。（这有点愚蠢和耗时）。我想系统化它，但我一直很难，因为我不明白 javascript/jquery 如何与 .click() 和数组一起工作。

$(document).ready(function(){
    var left = new Array($('#a'),$('#b'), $('#c'),$('#d'), $('#e'));
    var right = new Array($('#1'),$('#2'),$('#3'),$('#4'),$('#5'));
   // left[0].click(function(){right[0].fadeIn('fast');})
    var numbers = new Array(1,2,3,4,5);

    function fadey(x){
        left[x].click(function(){
          right[x].fadeIn('fast');
         })

    }
    for (var i = 0; i < left.length; i++) {
      fadey(i);
    };
})

此代码获取它，以便左侧按钮导致相应的右侧 div 出现。问题是我似乎无法在不导致所有 div 消失的情况下让其他 div 消失。

理想情况下，如果我有一行代码可以简单地检查左侧 jquery 对象数组何时被单击，获取其索引值，并导致相应的右侧 jquery 对象数组出现，同时隐藏另一个那些。

这样我就可以将元素插入每个数组，然后不必担心一个一个地编写这些案例。

非常感谢你的帮助！

4

1 回答 1

2

您可以使用类而不是 ID 创建一个通用事件处理程序：

$('.left button').click(function() {
    var index = $(this).index();

    $('.right section').eq(index).fadeIn('fast');
});

我假设您的 HTML 看起来像这样：

<aside class="left">
    <button>One</button>
    <button>Two</button>
    <button>Three</button>
</aside>

<aside class="right">
    <section>One</section>
    <section>Two</section>
    <section>Three</section>
</aside>
于 2013-02-28T20:23:26.030 回答