Question

我不知道如何搜索这个，所以我在这里问。

我继承了一个项目，没有人知道这个语法技巧是什么。

如果从列表中选择了一个或另一个特定值，则会有一个选择下拉更改事件来调用函数。

$('#accordion select[name=x_range]').change(function(){
  $('#custom-time')[$(this).val() == 'custom' ? 'show' : 'hide']();
  $('#custom-time-to-now')[$(this).val() == 'custom_to_now' ? 'show' : 'hide']();
  updateTimeIntervalOptions();
}).triggerHandler('change');

在此中，在#custom-time或#custom-time-to-now div上调用show或hide函数。

什么叫这样的函数叫做？

编辑：
我应该说我理解三元if / else，但不理解$(selector)[function_name]()部分。

Answer 1

我会说这不是一招，而是了解javascript的三个功能。

首先，函数是第一类对象，因此您可以将它们分配给变量等

 var f = function () { ... }
 var b = [];
 b[1] = f; // assigning function to array element
 b[1]();   // calling function assigned to array element

第二，方便的三元运算符，它有效地简化了if和assignement组合的表示法：

 var a = (b >c ) ? b : c;

 // is the same as

 if (b > c ) {
     a = b;
 } else {
     a = c;
 }

最后但并非最不重要的是，每个对象属性都可以作为字典元素访问，即

 a.b = 5
 a['b'] === 5 // true!

所以把所有这些放在一起就可以有这样的表达

$(selector)[condition?'show':'hide']();

等于

if (condition) {
   $(selector).show();
} else {
   $(selector).hide();
}

更新：关于此特定情况的一个注释。在大多数情况下，你不需要做那样复杂的事情，因为$().toggle()接受布尔参数来打开和关闭，所以

$(selector)[condition?'show':'hide']();

的工作方式与

相同

$(selector).toggle(!!condition);

注意我用!!为了将值转换为布尔值，因为切换使用===

检查参数

Answer 2

什么叫这样的函数叫做？

编码不良。

这是一种动态调用show()或hide()函数的方法。这是一种令人讨厌的讨厌的看法。

编辑：显然我的回答对某些人来说是“有争议的”。请让我澄清一下：如果我能在三元运算符上写if-else语句 - 特别是对于字符串比较这样的事情 - 我肯定会明确更短的代码。

这不是“血腥讨厌的外观”，因为只有三元运算符或只是方法的括号访问。这是一种血腥讨厌的表情，因为代码在清晰度上采用了快捷方式，并在不需要时采用了该快捷方式。

三元运营商也不错。支架访问也不错。但它们是容易被滥用的易变性概念。

Answer 3

显然它被称为Bracket Notation

Answer 4

三元运算符将值设置为两个或更多选项（可以嵌套）。

将它们视为switch或if/else或if/elseif/.../else操作，但仅限于设置一个值。

所以看看像：

var name = X === Y ? "Bob" : "Doug";
sayHello(name);

这是一个三元条件，根据条件是真还是假，可选择设置名称。

在你的jQuery中，他们只是跳过一步，使用括号符号和内部三元组。

People[ (selected_person === "Bob") ? "Bob" : (selected_person === "Doug") ? "Doug" : "Jimmy" ].sayHi();

根据sayHi()的值，这会针对People.Bob，People.Doug或People.Jimmy致电selected_person。

所以这是一个三元条件，用于选择一个嵌套在括号内的对象属性，而不是分两步完成：

 var person = // ternary from last step
 People[person].sayHi();

修改

根据您的编辑，它是括号表示法。

MyObj = { myFunc : function () { doStuff(); } };

您可以通过几种不同的方式致电myFunc 使用点符号：var func = MyObj.myFunc;或通过括号表示法：var func = MyObj["myFunc"];
无论哪种方式，func的值现在为myFunc。

所以他们正在做的是将string设置为他们想要调用的函数的名称。

var string = "show";
MyObj[string] // = MyObj.show
MyObj[string]() // = MyObj.show()

对于您的代码，他们使用三元来确定字符串的值。

Answer 5

它被称为“数组表示法”。看这里：http://www.erichynds.com/jquery/accessing-jquery-methods-using-array-syntax/

Answer 6

作者使用三元运算符（? :）使用数组表示法el['show']()而不是el.show()来调用jQuery对象的成员函数。细分，看起来像：

var fnName;
if($(this).val() == 'custom') {
  fnName = 'show';
} else {
  fnName = 'hide';
}

$('#custom-time')[fnName]();  // an alternative to $('#custom-time').show() or .hide()

Answer 7

我认为这种模式没有特定的名称。有一个条件运算符用于选择不同的方法名称，然后使用带有“括号”或“数组”语法的字符串动态调用该方法。

这是什么JavaScript / JQuery语法？

7 个答案: