替代多，如果在JavaScript

Question

else語句

我的問題是非常相似的Reduce multiple if else statements

我有多個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來定位兄弟選擇器，並設置背景色，所以我需要設置它。不透明。

Answer 1

你可以使用一個數組：

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" 
    }); 
} 

Answer 2

做一個選擇，以獲得在一個jQuery對象的所有元素，然後通過他們使用each method循環：

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 : ""); 
}); 

Answer 3

也許你可以做這樣的事情，通過使用:header選擇。

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

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