onclick 属性不适用于 flexbox答案

【问题标题】：onclick attribute not working with flexboxonclick 属性不适用于 flexbox
【发布时间】：2017-01-20 02:02:48
【问题描述】：

所以我正在尝试使用 flexbox 创建一个简单的侧导航... 当蓝色 div .. 被点击时，我希望红色 div 的宽度“flex”从 0 变为 1，即“50%”...... 我的代码在下面，但我还将包含一个 codepen...

HTML

<div class="container flex">
<div class="blue" onclick="clickBlue();"></div>
<div class="red"></div>
</div>

CSS

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

http://codepen.io/gebrutommy/pen/bwEGBv

【问题讨论】：

检查您的控制台，该函数未定义，因为 HTML 是在加载 JS 之前呈现的。
如果你把函数放在合适的地方，效果很好jsfiddle.net/j08691/t757Lm6y

标签： javascript jquery html css flexbox

【解决方案1】：

问题是你在准备好的回调中定义clickBlue，因此它的范围不是全局的，所以你不能从全局范围中引用它。要解决此问题，请在全局范围内定义 clickBlue。没有document.ready 函数。

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

.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: 0;
  height: 100px;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container flex">
  <div class="blue" onclick="clickBlue();"></div>
  <div class="red"></div>
</div>

附：这解决了您的问题，但如果您保留 document.ready 回调并在内部的 .blue 选择器上添加一个点击侦听器，而不使用 html 挂钩，效果会更好。

$('.blue').on('click', clickBlue);

【讨论】：

【解决方案2】：

您的 clickBlue 函数位于另一个函数中，因此无法在文档中访问。尝试通过 jQuery 在同一范围内添加它。例如，在你声明函数之后，尝试：

$('.blue').on('click',clickBlue);

并将其从 HTML 的“onclick”中删除。

【讨论】：

【解决方案3】：

问题是您的函数 clickBlue 未定义。

您可以改为将事件侦听器添加到蓝色 div，如下所示：

代码片段：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container flex">
  <div class="blue"></div>
  <div class="red"></div>
</div>

【讨论】：