替代javascript中的多个if-else语句
Alternative to multiple if else statements in javascript
我的问题与Reduce multiple if else语句非常相似
我有多个if-else语句,我想使用jquery每个函数来提高代码的效率,但我不知道如何做到这一点。
我在wordpress中运行jQuery,我相信它是在无冲突模式下运行的,所以我无法获得更多(我认为是)高级主题,这些主题提供了适合我的示例,因为我无法理解要使用的正确函数语法。
如果有人能帮我解释如何为我做这件事,那将是令人惊讶的。这是我的代码:
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来针对同级选择器,并且背景颜色是在其中设置的,所以我需要设置它。不透明。
也许您可以通过使用: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
:的实现
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 : "");
});
相关文章:
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 如何检查if/else语句中的随机条件
- 在Javascript中为if/else语句添加OR
- geoTest函数-创建if/else语句
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- 编写if-else语句的更好方法
- 在if/else语句中显示DIV
- 由 if / else 语句中的无效语法导致的语法错误
- JavaScript if else 语句来显示 html 标签
- 如何做if/else语句并使用控制台.log打印出来
- 此 JavaScript 代码无法正常工作(if-else 语句)
- 不带花括号的If/else语句javascript
- 如何缩短if-else语句
- 用于筛选数据的函数--if.else语句
- 赢得't输入javascript if/else语句
- 打印出带有参数的if-else语句
- 更改jQuery中if-else语句的图标
- If/else语句和用户下拉选择
- PHP、JS和带有if-else语句的代码点火器脚本
- 什么'这是一种基于if/if-else语句显示popover的简单方法