1

我的问题与减少多个 if else 语句非常相似

我有多个 if else 语句，我想使用 jquery 每个函数来提高代码效率，但我不知道该怎么做。

我在 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 来定位兄弟选择器，并且在其中设置了背景颜色，所以我需要设置它。不透明。

4

3 回答 3

5

也许你可以通过使用选择器来做这样的事情:header。

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

    $this.prev().css({
        backgroundColor: $this.mouseIsOver()? 'rgba(240,234,222,0.9)' : 'transparent'
    });
});
于 2013-08-07T13:10:59.630 回答
2

你可以使用一个数组：

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 选择器更简单。这可能会也可能不会起作用，具体取决于mouseIsOver：

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"
    });
}
于 2013-08-07T12:59:15.243 回答
1

制作一个选择器以获取单个 jQuery 对象中的所有元素，然后使用该each方法循环它们：

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 : "");
});
于 2013-08-07T13:01:50.713 回答