我怎样才能减少这个重复的 jQuery 呢？答案

【问题标题】：How can I make this repetitious jQuery less so?我怎样才能减少这个重复的 jQuery 呢？
【发布时间】：2009-11-19 15:38:33
【问题描述】：

我有 4 个 jQuery 块，如下所示：

$('#aSplashBtn1').click(function(){
  $('#divSliderContent div').hide();
  $('#divSplash1').fadeIn('slow');
  return false;
});
$('#aSplashBtn2').click(function(){
  $('#divSliderContent div').hide();
  $('#divSplash2').fadeIn('slow');
  return false;
});
$('#aSplashBtn3').click(function(){
  $('#divSliderContent div').hide();
  $('#divSplash3').fadeIn('slow');
  return false;
});
$('#aSplashBtn4').click(function(){
  $('#divSliderContent div').hide();
  $('#divSplash4').fadeIn('slow');
  return false;
});

我已经尝试了解更多关于 javascript 数组和 for 循环的信息，但是当我尝试在此代码中实现它时，它最终只能用于第 1 块。有人可以告诉我他们将如何完成优化吗？

【问题讨论】：

#aSplashBtn4 相对于#divSplash4 在哪里？
for (var i = 1; i < 5; i++) 不工作？
您能发布一个您的标记示例吗？

标签： javascript jquery optimization

【解决方案1】：

Sosh's answer 的变体

$('#aSplashBtn1').click(hideAndFadeIn('#divSplash1'));
$('#aSplashBtn2').click(hideAndFadeIn('#divSplash2'));
$('#aSplashBtn3').click(hideAndFadeIn('#divSplash3'));


function hideAndFadeIn(splash){
    return function() {
        $('#divSliderContent div').hide();
        $(splash).fadeIn('slow');
        return false;
    };
}

【讨论】：

是的，这个更好——用这个！ :)
您是否也想在匿名函数上接受e 参数并运行e.preventDefault(); 以防止页面跳转？（我假设 aSplashBtns 是 a 标签）
好点，我只是输入了return false; 以保持它与 OP 等效

【解决方案2】：

如果可点击的项目是同级的，你可以这样做：

$('#aSplashBtn1').siblings().andSelf().click(function(e){
    $('#divSliderContent div').hide();
    $('#divSplash'+e.target.id.substr(e.target.id.length-1)).fadeIn('slow');
    e.preventDefault();
});

【讨论】：

【解决方案3】：

var $divSlider = $("#divSliderContent div");
$('*[id^=aSplashBtn]').live('click', function(e){
    // Get the number from the id of the clicked element
    var id = this.id.match(/^aSplashBtn(\d+)$/)[1];

    $divSlider.hide();

    $("#divSplash" + id).fadeIn('slow');

    // Preferred as opposed to return false
    e.preventDefault();
});

这将设置一个处理程序，该处理程序将匹配以aSplashBtn 开头的id 的每个元素。您的 id 可以随心所欲地增加（即#aSpashBtn100），它仍然会与正确的div#divSplash100 配对。

另外，我将 #divSliderContent div 缓存在它自己的变量中，因为您不希望 jQuery 在每次点击时再次“查找”。

【讨论】：