1

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

我的网站上有两个单独的 jQuery 语句，它们基本上作用于一个 div，当单击该 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'); 
}

//然后在点击时调用这些函数：

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


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

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


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

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

感谢您的任何帮助，您可以提供...

4

3 回答 3

0

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

function turnOn() {
  var w = $(this).width();
  $(this).animate ({
    right : '0',
   'margin-right':'0px'
  }, 'fast');
}
于 2013-02-28T16:56:41.750 回答
0

您可以将已单击元素的引用传递到“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');
  }
});
于 2013-02-28T16:57:59.750 回答
0

您应该重构您的重复代码并将其移动到功能。然后将相应的处理程序传递给函数以绑定点击事件。由于绑定的点击事件函数在函数范围内，所以对点击事件可见。尝试对您的代码进行更多重构:)。代码重构很有趣，重构后的代码可以重用且易于维护。

简化版如下。

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');
});
于 2013-02-28T17:08:47.000 回答