[英]Alternative to multiple if else statements in javascript
我的問題與減少其他if語句非常相似
我有多個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來定位同級選擇器,並且在其中設置了background-color,所以我需要對其進行設置。 不透明。
也許可以使用:header
選擇器來做類似的事情。
$(':header + p').each(function () {
var $this = $(this);
$this.prev().css({
backgroundColor: $this.mouseIsOver()? 'rgba(240,234,222,0.9)' : '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選擇器更為簡單。 根據mouseIsOver
的實現,這可能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"
});
}
創建一個選擇器以獲取單個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 : "");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.