Question

我想知道是否有人可以帮助我！

我的网站上有两个单独的jQuery语句，它基本上作用于div，当点击时，会扩展一个内容区域，该区域被屏幕右侧的负边距隐藏。

我想要做的是在每个页面上都有几个这样的元素，但我希望尽可能简化一些内容，而不必每个元素都添加一个全新的语句！

以下是相关网站的链接（元素位于右侧 - 一个带有加号，另一个带有Twitter图标）

以下是我的代码：

//设置功能：

function extraOn() {
var w = $('.homeplus-expanded').width();
$('.homeplus-expanded').animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
}


function extraOff() {
var ws = $('.homeplus-expanded').innerWidth();
$('.homeplus-expanded').animate({
    right : '0',
    'margin-right':-ws
    },'fast'); 
}



function shareOn() {
var w = $('.homeplus-expanded').width();
$('.shareplus-expanded').animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
}


function shareOff() {
var sp = $('.shareplus-expanded').innerWidth();
$('.shareplus-expanded').animate({
    right : '0',
    'margin-right':-sp
    },'fast'); 
}

//然后在onClick上调用这些函数：

$('.homeplus').click(function(){
extraOn();
});


$('.homeplus-expanded span.close').click(function(){
extraOff();
    });

$('.shareplus').click(function(){
shareOn();
});


$('.shareplus-expanded span.close').click(function(){
shareOff();
    });

正如你所看到的，我确信有一些交叉和一些空间使代码更整洁，更模块化....

感谢您提供任何帮助......

Answer 1

使用一个使用$(this)选择器的函数，并从click事件处理程序中调用它。所以例如：

function turnOn() {
  var w = $(this).width();
  $(this).animate ({
    right : '0',
   'margin-right':'0px'
  }, 'fast');
}

Answer 2

您可以将引用传递给已单击到“extraOn”和其他函数的元素，然后将此引用用作jquery选择器

// Call it like this 
extraOn(this);

function extraOn(elem) {
  var w = $(elem).width(); // No idea what this is for
  $(elem).animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
  }
}

或者您可以使用extraOn函数内容作为实际回调，这样您也可以使用该事件，如下所示：

$('.homeplus').click(function (ev) {
  ev.preventDefault(); // if it is a <a> element or has some other default behaviour
  var w = $(this).width(); // No idea what this is for
  $(this).animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
  }
});

如果您希望通过ajax加载这些元素，您可能更喜欢使用延迟事件处理程序：

$(document).on('click','.homeplus',function (ev) {
  ev.preventDefault(); // if it is a <a> element or has some other default behaviour
  var w = $(this).width(); // No idea what this is for
  $(this).animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
  }
});

Answer 3

您应该重构您的重复代码并将其移至正常运行状态。然后将相应的处理程序传递给函数以绑定click事件。由于绑定的点击事件功能在功能范围内，因此对于click事件是可见的。尝试为你的代码做更多的重构:)。代码重构很有趣，重构的代码可以重用并且易于维护。

简化版如下。

function InitContentZone(turnOnElement, turnOffElement, expandElement)
{
    var expandEle = expandElement;
    function extraOn() {
        $(expandEle).animate ({
            right : '0',
            'margin-right':'0px'
        }, 'fast');
    }

    function extraOff() {
        var ws = $(expandEle).innerWidth();
        $(expandEle).animate ({
            right : '0',
            'margin-right':-ws
        }, 'fast');
    }

    $(turnOnElement).click(extraOn);
    $(turnOffElement).click(extraOff);
}

$(document).ready(function()
{
    InitContentZone('.homeplus', '.homeplus-expanded span.close', '.homeplus-expanded');
    InitContentZone('.shareplus', '.shareplus-expanded span.close', '.shareplus-expanded');
});

结合Jquery语句

3 个答案: