javascript中多个if-else语句的替代方案

我的问题很类似于

我有多个if-else语句，我想使用jquery-each函数来提高代码的效率，但我不知道如何做到这一点

我在wordpress中运行jQuery，我相信它是在noconflict模式下运行的，所以我无法获得更多（我认为）高级主题，这些主题为我提供了示例，因为我无法理解正确的函数语法

如果有人能帮我解释一下怎么做，那就太棒了。这是我的密码：

var $h6p = $("h6 + p");
var $h5p = $("h5 + p");
var $h4p = $("h4 + p");
var $h3p = $("h3 + p");
var $h2p = $("h2 + p");
var $h1p = $("h1 + p");
var $fullercolor_bg = "rgba(240,234,222,0.9)";

if($h1p.mouseIsOver()) {
    $h1p.prev().css("background-color", $fullercolor_bg);
} else {
    $h1p.prev().css("background-color", "");
}
if($h2p.mouseIsOver()) {
    $h2p.prev().css("background-color", $fullercolor_bg);
} else {
    $h2p.prev().css("background-color", "");
}
if($h3p.mouseIsOver()) {
    $h3p.prev().css("background-color", $fullercolor_bg);
} else {
    $h3p.prev().css("background-color", "");
}
if($h4p.mouseIsOver()) {
    $h4p.prev().css("background-color", $fullercolor_bg);
} else {
    $h4p.prev().css("background-color", "");
}
if($h5p.mouseIsOver()) {
    $h5p.prev().css("background-color", $fullercolor_bg);
} else {
    $h5p.prev().css("background-color", "");
}
if($h6p.mouseIsOver()) {
    $h6p.prev().css("background-color", $fullercolor_bg);
} else {
    $h6p.prev().css("background-color", "");
}

（如果CSS之前有一个相邻的兄弟姐妹选择器，那么此时我将在月球上方。）

---

编辑：感谢到目前为止的帮助，我应该提到的一件事是else语句的空设置是故意的。我已经使用CSS来定位同级选择器，并且在其中设置了背景色，所以我需要设置它。不透明。

您可以使用阵列：

var $hp = ["h6 + p", "h5 + p", "h4 + p", "h3 + p", "h2 + p", "h1 + p"],
    $fullercolor_bg = "rgba(240,234,222,0.9)";

$hp.forEach(function(v) {
    if($(v).mouseIsOver()) {
        $(v).prev().css({
            backgroundColor: $fullercolor_bg
        });
    } else {
        $(v).prev().css({
            backgroundColor: "transparent"
        });
    }
});

在您的例子中，我认为在变量中使用多个CSS选择器更简单。这可能起作用，也可能不起作用，这取决于

mouseishover

的实现：

var $hp = $("h6 + p, h5 + p, h4 + p, h3 + p, h2 + p, h1 + p"),
    $fullercolor_bg = "rgba(240,234,222,0.9)";

if($hp.mouseIsOver()) {
    $hp.prev().css({
        backgroundColor: $fullercolor_bg
    });
} else {
    $hp.prev().css({
        backgroundColor: "transparent"
    });
}

---

您可以使用数组：

var $hp = ["h6 + p", "h5 + p", "h4 + p", "h3 + p", "h2 + p", "h1 + p"],
    $fullercolor_bg = "rgba(240,234,222,0.9)";

$hp.forEach(function(v) {
    if($(v).mouseIsOver()) {
        $(v).prev().css({
            backgroundColor: $fullercolor_bg
        });
    } else {
        $(v).prev().css({
            backgroundColor: "transparent"
        });
    }
});

在您的例子中，我认为在变量中使用多个CSS选择器更简单。这可能起作用，也可能不起作用，这取决于

mouseishover

的实现：

var $hp = $("h6 + p, h5 + p, h4 + p, h3 + p, h2 + p, h1 + p"),
    $fullercolor_bg = "rgba(240,234,222,0.9)";

if($hp.mouseIsOver()) {
    $hp.prev().css({
        backgroundColor: $fullercolor_bg
    });
} else {
    $hp.prev().css({
        backgroundColor: "transparent"
    });
}

---

创建一个选择器以获取单个jQuery对象中的所有元素，然后使用循环遍历它们：

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  if($(el).mouseIsOver()) {
    $(el).prev().css("background-color", $fullercolor_bg);
  } else {
    $(el).prev().css("background-color", "");
  }
});

或使用条件运算符选择值：

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  $(el).prev().css("background-color", $(el).mouseIsOver() ? $fullercolor_bg : "");
});

---

创建一个选择器以获取单个jQuery对象中的所有元素，然后使用循环遍历它们：

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  if($(el).mouseIsOver()) {
    $(el).prev().css("background-color", $fullercolor_bg);
  } else {
    $(el).prev().css("background-color", "");
  }
});

或使用条件运算符选择值：

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  $(el).prev().css("background-color", $(el).mouseIsOver() ? $fullercolor_bg : "");
});

---

也许你可以用选择器来做类似的事情

$(':header + p').each(function () {
    var $this = $(this);

    $this.prev().css({
        backgroundColor: $this.mouseIsOver()? 'rgba(240,234,222,0.9)' : 'transparent'
    });
});

---

也许你可以用选择器来做类似的事情

$(':header + p').each(function () {
    var $this = $(this);

    $this.prev().css({
        backgroundColor: $this.mouseIsOver()? 'rgba(240,234,222,0.9)' : 'transparent'
    });
});

---

---

将所有jQuery对象放在一个数组中，迭代该数组并将逻辑应用于数组的每个元素。如果您不知道如何使用数组：。谢谢您的链接。我将复习我的数组技能。将所有jQuery对象放在一个数组中，迭代数组，并将逻辑应用于数组的每个元素。如果您不知道如何使用数组：。谢谢您的链接。我将复习我的数组技能。这是否有效取决于

.mouseIsOver（）

的实现方式。我从中获取了“.mouseIsOver（）”。当我尝试使用该代码时，该代码不起作用，但对于单个选择器（仅h6+p）它起作用。对不起，您提供的第一个代码起作用，因此得到了接受的答案。第二段代码没有。这是否有效取决于

.mouseIsOver（）

的实现方式。我从中获取了“.mouseIsOver（）”。当我尝试使用该代码时，该代码不起作用，但对于单个选择器（仅h6+p）它起作用。对不起，您提供的第一个代码起作用，因此得到了接受的答案。第二段代码不想引用或解释

：header

？@rink.attendant.6我只是在试图找到一个好答案的时候才学会的=P我总是发现回答问题就像让别人学呵呵一样好；）我刚刚试过，这似乎是针对页面上的每一个p，而不仅仅是标题的相邻p。@patrickzdb嗯，由于浏览器的一些限制，我现在无法使用

MouseSover

进行测试，但是我使用jQuery 1.10.2进行了测试，它有效地针对了正确的元素。您确定您的实现是正确的吗？你在运行哪个jQuery版本？请参考或解释一下

：header

？@rink.attendant.6我只是在试图找到一个好答案时才学会的=P我总是发现回答问题就像让别人学呵呵一样好；）我刚刚试过，这似乎是针对页面上的每一个p，而不仅仅是标题的相邻p。@patrickzdb嗯，由于浏览器的一些限制，我现在无法使用

MouseSover

进行测试，但是我使用jQuery 1.10.2进行了测试，它有效地针对了正确的元素。您确定您的实现是正确的吗？您正在运行哪个jQuery版本？每当悬停相邻的p时，这会更改每个标题，而不仅仅是前一个。可能与ismousehover函数的工作方式有关，@patrickzdb:No，代码一个接一个地循环通过元素，就像稍后发布的接受答案中的代码一样……每当悬停相邻的p时，这会更改每个标题，而不仅仅是前一个标题。可能与ismousehave函数的工作方式有关，@patrickzdb:No，代码一个接一个地循环通过元素，就像稍后发布的接受答案中的代码一样。。。