理解jQuery中`show`和`hide`方法中的三元运算符。

Question

我刚刚在网上查看了一个下拉菜单的代码演示这里，在下拉菜单中有以下一行：

 $(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();

现在我理解了三元运算符，并且我也明白

 $(this).closest('.menu')[0];

经常用来获取第一个元素的语法是，但我并不完全理解上面的语法，这行代码是如何执行的，还是说它只是：

 $(this).closest('.menu').hide();

根据三元运算符的结果？

- Alexander Solonik

---

@PranavCBalan 我不明白你想说什么！ - Alexander Solonik

@PranavCBalan 是的，没错，它们是jQuery方法！ - Alexander Solonik

Answer 1

非常简单。在JS中，您不仅可以使用object.field_name访问对象成员，还可以使用object['field_name']

因此，您的代码行可以翻译为：

if(s.indexOf(g) !== -1) {
   // $(this).closest('.menu').show()
   $(this).closest('.menu')['show']() 
} else {
   // $(this).closest('.menu').hide()
   $(this).closest('.menu')['hide']() 
}

- zamuka

Answer 2

基本上，.closest() 做的是遍历 DOM 元素，并在给定的上下文中匹配给定的选择器。以下是 closest 的实际语法。

.closest( selector [, context ] )

所以，无论您在上下文中提供什么条件，它都会匹配并返回元素。在您的情况下，

$(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();

最接近的方法是遍历 '.menu' 的所有 DOM 元素，并将搜索框中输入的字母与 DOM 元素进行匹配。如果菜单中的任何 DOM 元素包含该字母，则将其属性设置为 show()，否则将隐藏它。

- Gagan Jaura