Javascript onclick属性不适用于flexbox

所以我尝试用flexbox创建一个简单的侧导航。。。 当蓝色div。。单击后，我希望红色div从宽度“flex”0更改为宽度为“50%”的1。。。。 我的代码如下，但我也将包括一个代码笔

HTML

JS

---

问题在于您在ready callback中定义了

clickBlue

，因此它的作用域不是全局的，因此您不能从全局作用域引用它。要解决此问题，请在全局范围内定义

单击蓝色
。没有
文档准备
功能


函数单击蓝色（）{
$（“.red”）.css（“flex”，“1”）；
}
.container{
背景：rgba（0,0,0,1）；
宽度：100%；
高度：100px；
}
蓝先生{
背景：rgba（0,0250,2）；
弹性：1；
高度：100px；
}
瑞德先生{
背景：rgba（250,0,0,4）；
弹性：0；
高度：100px；
}
.flex{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
问题在于您在ready callback中定义了
clickBlue
，因此它的作用域不是全局的，所以您不能从全局作用域引用它。要解决此问题，请在全局范围内定义
单击蓝色
。没有
文档准备
功能


函数单击蓝色（）{
$（“.red”）.css（“flex”，“1”）；
}
.container{
背景：rgba（0,0,0,1）；
宽度：100%；
高度：100px；
}
蓝先生{
背景：rgba（0,0250,2）；
弹性：1；
高度：100px；
}
瑞德先生{
背景：rgba（250,0,0,4）；
弹性：0；
高度：100px；
}
.flex{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
您的clickBlue函数位于另一个函数内，因此无法在文档中访问。尝试通过jQuery在同一范围内添加它。例如，在声明函数后，请立即尝试：

$（'.blue'）。在（'click'，clickBlue'）

然后将其从HTML的“onclick”中删除。
您的clickBlue函数位于另一个函数中，因此无法在文档中访问。尝试通过jQuery在同一范围内添加它。例如，在声明函数后，请立即尝试：

$（'.blue'）。在（'click'，clickBlue'）

并将其从HTML的“onclick”中删除。
问题在于您的函数clickBlue未定义

您可以改为向blue div添加事件侦听器，如下所示：

代码片段：


$（文档）.ready（函数（）{
$（“.blue”）。在（“单击”，函数（）{
$（“.red”）.css（“flex”，“1”）；
});
});
.container{
背景：rgba（0,0,0,1）；
高度：100px；
}
蓝先生{
背景：rgba（0,0250,2）；
弹性：1；
高度：100px；
}
瑞德先生{
背景：rgba（250,0,0,4）；
弹性：0；
高度：100px；
}
.flex{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
问题在于您的函数clickBlue未定义

您可以改为向blue div添加事件侦听器，如下所示：

代码片段：


$（文档）.ready（函数（）{
$（“.blue”）。在（“单击”，函数（）{
$（“.red”）.css（“flex”，“1”）；
});
});
.container{
背景：rgba（0,0,0,1）；
高度：100px；
}
蓝先生{
背景：rgba（0,0250,2）；
弹性：1；
高度：100px；
}
瑞德先生{
背景：rgba（250,0,0,4）；
弹性：0；
高度：100px；
}
.flex{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

检查控制台，该函数未定义，因为HTML在加载JS之前呈现。如果将函数放置在正确的位置，则可以正常工作检查控制台，该函数未定义，因为HTML在加载JS之前呈现。如果将函数放置在正确的位置，则可以正常工作
<div class="container flex">
<div class="blue" onclick="clickBlue();"></div>
<div class="red"></div>
</div>

.container{background:rgba(0,0,0,.1); width:100%; height:100px;}
.blue{background:rgba(0,0,250,.2); flex:1; height:100px;}
.red{background:rgba(250,0,0,.4); flex:1; height:100px;}
.flex{display:flex; justify-content:center; align-items:center;}

$(document).ready(function(){
function clickBlue(){ 
$(".red").css("flex","1");
}
});