Question

我想知道如何在纯javascript 中隐藏div onclick而不使用getElementById之类的内容。

如果divs的数量未知，那么目标就是扩展和工作。

以下是仅隐藏第一个div的当前模式：

document.getElementById('msg0').addEventListener('click',function(e){
    document.getElementById('msg0').style.display = 'none';
});

以下是示例divs：

<div class="alert alert-info" id="msg0">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Three credits remain in your account.
</div>

<div class="alert alert-success" id="msg1">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Profile details updated.
</div>

<div class="alert alert-warning" id="msg2">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Your account expires in three days.
</div>

<div class="alert alert-danger" id="msg3">
    <button data-dismiss="alert" class="close">
    &times;
    </button>
    <i class="fa fa-check-circle"></i>
    Document deleted.
</div>

Answer 1

使用事件委派。只设置了一个点击处理程序，并且可以动态添加警报。

document.addEventListener('click', function (event) {
    var alertElement = findUpTag(event.target, '.alert');

    if (alertElement) {
       alertElement.style.display = 'none';
    }
});

function findUpTag(el, selector) {
    if (el.matches(selector)) {
        return el;
    }

    while (el.parentNode) {
        el = el.parentNode;
        if (el.matches && el.matches(selector)) {
            return el;
        }
    }
    return null;
}

DEMO：http://jsfiddle.net/ht2qp6zj/3/

Answer 2

首先，您需要为需要实现此相同功能的所有div元素添加一个公共类。例如，让我们将该类命名为“hideable”：

/// Html
<div class='hideable'></div>

// Javascript
var elements = document.getElementsByClassName('hideable');

for(var i=0; i<elements.length; i++)
{
    var element = elements[i];
    element.addEventListener('click', onClick);
}

function onClick(event){
    event.target.style.display = 'none';
}

在纯JavaScript中隐藏div onclick

2 个答案: