是否可以在条件语句中链接 hasClass() 或 is() ？

Posted 2023-05-09

【中文标题】是否可以在条件语句中链接 hasClass() 或 is() ？

【英文标题】：Is it possible to chain hasClass() or is() in a conditional statement?

【发布时间】：2014-11-08 09:02:46

【问题描述】：

我注意到我网站的代码中有很多以下类型的条件语句：

//Example 1
if ($("#myDiv1").hasClass("myClass1")) 
    $("#myDiv1").hide();


//Example 2
if (!$("#myDiv2").is(":hover")) 
    $("#myDiv2").slideUp("slow");

整理一下的明显方法如下：

//Example 1
var e1 = $("#myDiv1");
if (e1.hasClass("myClass1")) 
    e1.hide();


//Example 2
var e2 = $("#myDiv2");
if (!e2.is(":hover")) 
    e2.slideUp("slow");

但是，我想知道尽管有 if 声明，我是否可以以某种方式链接这些函数。试了这两行代码（没想到行不通）；

//Example 1
var e1 = $("#myDiv1");
if (e1.hasClass("myClass1").hide()); //Attempt1

e1.hasClass("myClass1").hide(); //Attempt2

当if 语句和if 语句的参数相同时，是否有任何方法链接条件？

【问题讨论】：

这里还有一个有用的方法，它使用带布尔参数的 toggle()：elem.toggle( elem.hasClass('myClass'))...如果为真则显示，如果为假则隐藏

@charlietfi....谢谢...另一个有用的例子

【参考方案1】：

重写它以减少代码的一种方法如下。这种风格利用了 javascript 评估布尔语句的方式，有时被称为“短路”。基本上每行的第二部分（在 && 之后）只有在第一部分为真时才会执行。

$("#myDiv1").hasClass("myClass1") && $("#myDiv1").hide();
!$("#myDiv2").is(":hover") && $("#myDiv2").slideUp("slow");

【讨论】：

请注意，这完全替换了您的代码，不需要 if 语句或类似的东西，只需这两行。查看以下文章以获取有关短路布尔评估的进一步说明。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

艰难的决定......虽然 YMMD 的代码非常简洁，但我喜欢 && 提供的灵活性

【参考方案2】：

这很简单。组合你的选择器：

$('#myDiv1.myClass1').hide();

和

$('#myDiv2:not(:hover)').slideUp();

【讨论】：

但我需要某种形式的条件语句:)

但是为什么呢？ :) 代码仅选择 ID 为 myDiv1 AND 的元素为 myClass1 类。这正是您的代码所做的。

jQuery 无法识别 :hover

我正在使用 jQuery 1.11.0，它似乎可以工作，虽然我读过有人在 IE8 中遇到 :hover 问题...不确定这是否仍然有效

好的..我收回它。 jQuery 已经很多年了，很久以前没有 API，浏览器也不配合

【参考方案3】：

在使用其中一种方法作为getter 后，您不能链接方法。由于hasClass() 严格来说是一个getter，它是jQuery API 中为数不多的永远不能被链接的方法之一。

您不能链接到的其他 getter 示例：

$(selector).val() ; /* returns string or array*/
$(selector).css('color'); /* with only one argument will return a value and not the element collection */

当用作设置器时，上述两个方法都可以链接，因为它们将返回选择器引用的元素集合：

$(selector).val(400).addClass('someClass') ;
$(selector).css('color','blue').somePlugin();

【讨论】：

好的，我明白了......而不是像 $("#myDiv").css("display" : "block"); 这样的“setter”。 //你可以在你的帖子中链接这个但不是“getter”版本