Question

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

//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语句的参数中的DOM元素相同时，有没有办法链接条件？

Answer 1

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

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

Answer 2

这很简单。结合您的选择器：

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

和

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

Answer 3

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

您无法链接到的其他吸气剂的示例：

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

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

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

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

3 个答案: