Question

我有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号块。有人能告诉我他们将如何完成这项优化吗？

Answer 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;
    };
}

Answer 2

如果可点击的项目是兄弟姐妹，您可以这样做：

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

Answer 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();
});

这将设置一个处理程序，该处理程序将匹配以id开头的aSplashBtn的每个元素。您的ID可能会达到您想要的最高水平（即#aSpashBtn100），并且仍会与正确的div#divSplash100配对。

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

如何让这个重复的jQuery更少？

3 个答案: