插入此条件语句的最优雅方式是什么？答案

【问题标题】：What is the most elegant way to insert this conditional statement?插入此条件语句的最优雅方式是什么？
【发布时间】：2011-07-21 13:33:48
【问题描述】：

我想通过click 或hover 传递一个变量来导致此方法。

现在，它默认点击。

    var defaults = {    
        xOffset: 10,        
        yOffset: 25,
        tooltipId: "easyTooltip",
        clickRemove: true,
        content: "",
        useElement: "",
        clickAppear: true
    }; 

    var options = $.extend(defaults, options);  
    var content;

$(this).click(function(e){
    $("#" + options.tooltipId).remove();                                                               
    content = (options.content != "") ? options.content : title;
    content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
    $(this).attr("title","");                                                   
    if (content != "" && content != undefined){         
        $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");      
        $("#" + options.tooltipId)
            .css("position","absolute")
            .css("top",(e.pageY - options.yOffset) + "px")
            .css("left",(e.pageX + options.xOffset) + "px")                     
            .css("display","none")
            .fadeIn("fast");
    return false;
    }
},

我想要它，以便我可以传递 clickAppear = false 的方法调用，在这种情况下，它会另外生成：

$(this).hover(function(e){
  ...

我想知道是否有一种优雅的方法可以在保持块 DRY 的同时编写此条件，而不是在条件中复制和粘贴整个方法两次（这似乎无论如何都不起作用）。

有什么想法吗？

【问题讨论】：

为什么不将所有代码放在一个函数中，并将该函数设置为.click 和.hover 的回调？
听起来很聪明，我只是不确定你指的是什么。
我同意马特所说的。 .click 和 .hover 不必采用匿名函数。只需创建一个命名函数，然后执行 if clickappear 和适当的绑定。
上下文中的this 是什么？不应该是"a"吗？
@Matt：把它作为一个答案，你就得到了我的 +1。我会，但我觉得我在偷你的答案。 :)

标签： javascript jquery plugins tooltip

【解决方案1】：

你可以写：

$(this)[options.clickAppear ? "click" : "hover"](function(e) {
  // your code
});

这只是检查选项并选择“点击”或“悬停”功能，然后调用它。

【讨论】：

哈哈。好吧，看起来很清楚；有时问题不是那么清楚或简单:-)
枪太快了，我什至不能再把它标记为正确的两分钟！谢谢尖头！好主意！
我没有想到您可以通过这种方式访问对象上的函数。在某种程度上，我花了很长时间才弄清楚这里发生了什么。 :)

【解决方案2】：

你应该将你的处理函数声明为一个变量：

var myFunc = function(e){ // your handling code here
};

然后在将处理程序附加到您设置条件的事件的函数上：

if(options.clickAppear)
   $(elem).click(myFunc);
else
   $(elem).hover(myFunc);

【讨论】：

函数也可以声明为function myFunc(e) { ... }
是的，或者更优雅地把它放在你的默认对象中。

【解决方案3】：

只需使用命名函数：

function doStuff() {
  ..
}

$(this).click(doStuff);
$(this).hover(doStuff);

【讨论】：

【解决方案4】：

正如 cmets 中所述，这可能无法按原样工作，因为 this 的第一个实例没有上下文 - 因此未定义。但这是一般的想法：

$(this).click(function(e){
    // your method
}).hover(function(e){
    $(this).trigger('click');
});

【讨论】：

有点不符合“优雅”的标准。
虽然不是最优雅的，但重写方法更优雅[这是OP的标准。]