Question

必须有更好的方法在以下代码块中设置变量$ callLinkContainer：

var $callLinkContainer;
if ( $callLink.closest('class1-tel').length > 0 ) {
     $callLinkContainer = $('body').find('.class1-container');
} else if ( $callLink.closest('.class2').length > 0 ) {
     $callLinkContainer = $('body').find('.class2-container');
} else {
     $callLinkContainer = $callLink.closest('.class3');
}

以前，我曾使用三元运算符来设置变量，但我很确定第三个条件使得这个变得不可能。如果有可能的话，我想让这段代码更简洁。

Answer 1

您可以使用几个带缩进的三元运算符

var $callLinkContainer = $callLink.closest('class1-tel').length > 0 
  ? $('body').find('.class1-container')
  : $callLink.closest('.class2').length > 0 
    ? $('body').find('.class2-container')
    : $callLink.closest('.class3');

操作员的优先级是，您不需要像

那样添加括号

a ? b : (c ? d : e)

您可能希望添加它们以获得更加清晰。

Answer 2

您可以嵌套条件运算符。代码更短，并且通过适当的换行符和缩进，它与if语句一样可读。

$callLinkContainer = $callLink.closest('class1-tel').length ?
    $('.class1-container') :
    ($callLink.closest('.class2').length ?
        $('.class2-container') :
        $callLink.closest('.class3'));

Answer 3

我想做下一个建议

将代码封装在多个函数中

function isCallLinkClosest(var callLinkSelector){ 
    return $callLink.closest(callLinkSelector).length > 0;
}

function getCallLinkContainer(var containerSelector){
    return $('body').find(containerSelector);
}

function getDataAttributeByClass(){ 
    if ( isCallLinkClosest('class1-tel')) {
     return getCallLinkContainer('.class1-container');
    } else if ( isCallLinkClosest('.class2')) {
     return getCallLinkContainer('.class2-container');
    } else {
     return $callLink.closest('.class3');
    }
}

这是我能用给定信息做的最佳建议：）

Answer 4

同时存在.class1-tel，.class2或.class3吗？如果没有，那么你可能会做这样的事情：

var $callLinkContainer = ($callLink.closest('.class1-tel, .class2').length
    ? $('body').find('.class1-container, .class2-container')
    : $callLink.closest('.class3'));

如果您对类名和dom结构更具体，那么代码可能更容易。

使用if，else if，else语句设置变量的最佳方法是什么？

4 个答案: