Question

我有以下代码：

function checkBoxOpenStatus(clickedBox) {
    if($("#productsBox").hasClass("boxOpen")) {
         closeBox(obj.productsBox.bx, clickedBox);
         delay = 200; 
    } else if($("#fabricationBox").hasClass("boxOpen")) {
         closeBox(obj.fabricationBox.bx, clickedBox);
         delay = 200;
    } else if($("#aboutPBBox").hasClass("boxOpen")) {
         closeBox(obj.aboutPBBox.bx, clickedBox); 
         delay = 200;
    } else { delay = 0; }

我的目标是评估三个框，如果其中一个具有类“boxOpen”，那么我需要关闭该框，并为我的“openSelectedBox”函数添加延迟（上面没有）。我的问题是，我可以将上面的代码更改为以下内容:(不会失去发送特定选择器的能力吗？）

    if($("#productsBox" || "#fabricationBox" || "#aboutPBBox").hasClass('boxOpen') {
        closeBox(obj.(**WHAT SELECTOR CAN GO HERE??**).bx, clickedBox);
        delay = 200;

我知道“或”评估有效，但我不知道如何使用该“或”定义的实例来激活具有适当选择的“closeBox”函数。我宁愿学习这个，所以请给我一个解释，选择器可以在那里进行这样的评估。

Answer 1

使用与该类的所有方框匹配的选择器。如果这返回至少1个元素，则会打开一个框，您可以获取此元素的ID。

然后你可以使用另一个选择器来获取带有类的元素的ID。

var openBoxes = $("#productBox.boxOpen, #fabricationBox.boxOpen, #aboutPBBox.boxOpen");
if (openBoxes.length > 0) {
    var openId = openBoxes.attr("id");
    closeBox(obj[openId].bx, clickedBox);
    delay = 200;
} else {
    delay = 0;
}

如果你给所有这些盒子一个公共类，而不是必须列出选择器中的所有ID，那会更简单。

Answer 2

您注意到重复的代码块并想要优化它们。（插入我喜欢你在这里meme。）

你可以这样做：

// This will get the 3 elements in a jQuery object and filter the 3 elements to only keep the ones that have the class "boxOpen"
var theOnesWithTheClass = $("#productsBox, #fabricationBox, #aboutPBBox").filter(".boxOpen");

// This will call the closeBox with the id of each element inside the jQuery object. I do it this way just in case there are more than 1 element.
// The jQuery each method will call the function setting the this context to each element inside the jQuery object.
theOnesWithTheClass.each(function() {
    closeBox(obj[this.id].bx, clickedBox);
});

// This will set the delay to 200 only if there are elements inside the jQuery object. The ? conditional returns the block before the : if true and the block after it if false.
delay = theOnesWithTheClass.length > 0 ? 200 : 0;

Jquery选择器以“this”返回

2 个答案: