Javascript如何检查一个条件是否已经满足,并不再应用它
Javascript how to check if a condition is already met and not apply it again?
尽量不要在计数为7或更小的时候设置背景色,如果它已经是红色,就不应该再设置了。
<div class="parent">
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
<li class="item">Item 7</li>
</ul>
</div>
当计数小于7时,如何停止反复设置颜色?
var parent = document.querySelector('.parent');
parent.addEventListener('click', changeColor, false);
function changeColor( e ) {
var element = e.target;
var item = document.querySelectorAll('.item');
element.parentNode.removeChild(element);
if( item.length <= 7 ) {
parent.style.background = "red";
console.log(
item.length + " set backgroud color"
)
}
}
演示http://jsfiddle.net/Grundizer/awc6rymn/如果我对你的问题理解正确的话,这应该能奏效:
var parent = document.querySelector('.parent');
var background = 'false';
parent.addEventListener('click', changeColor, false);
function changeColor( e ) {
var element = e.target;
var item = document.querySelectorAll('.item');
element.parentNode.removeChild(element);
if( item.length <= 7 && parent.style.background != 'red') {
parent.style.background = "red";
console.log(
item.length + " set backgroud color"
)
}
如果count小于7,则可以删除事件侦听器。这样,你不仅不会再改变颜色,你也不会在点击时运行任何东西。
if( item.length <= 7 ) {
parent.style.background = "red";
parent.removeEventListener('click', changeColor, false);
}
如果你有一个函数添加元素,只需重新开始收听
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- Emberjs应用程序加载在除Index之外的所有路由上
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 跟踪在页面加载时应用内联样式的JavaScript
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如果文本字段为空,则使用JavaScript应用CSS样式
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- angular 1.5应用程序中的导航栏
- 在Web应用程序中使用Highcharts javascript
- angularjs+rails应用程序中未显示模板
- 从html创建一个指令,该指令按类名应用函数
- 使用acess代币登录Facebook,并通过网络应用程序离线发布
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 在谷歌应用程序脚本中,如何在满足条件的情况下只发送一次电子邮件
- 在asp中单独登录.满足MVC 4应用程序
- 我怎样才能正确地创建一个可满足内容的字体测试器?类型编辑器与CSS类应用的JQuery
- Javascript如何检查一个条件是否已经满足,并不再应用它