Question

每次计数为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"
        )

    }


    }

DEMO http://jsfiddle.net/Grundizer/awc6rymn/

Answer 1

如果我理解你的问题，这应该可以解决问题：

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

    }

Answer 2

如果count低于7，你可以删除事件监听器。这样，你不仅不会再次改变颜色，而且你再也没有运行任何东西了。

if( item.length <= 7 ) {

        parent.style.background = "red";
        parent.removeEventListener('click', changeColor, false);

    }

如果某个地方你有一个功能添加元素，只需再次开始听。

Javascript如何检查是否已满足条件并且不再应用它？

2 个答案: