Question

我正在尝试创建一个列表，当我单击li元素时，弹出一个模态并且它有一个存档按钮。因此，当我单击该按钮时，模态所来自的特定li消失（显示：无）。以下是我的代码 -

列表

<ul>
    <li id="wa" onclick="openModal(this.id)"> List one</li>
    <li id="wb" onclick="openModal(this.id)"> List two</li>
</ul>

模态窗口（当我单击列表时出现此模态窗口，不包括此模态的css） -

<div class="modal" id="modal">
    <div class="modal_content" id="modal_content">
        <div class="m_header"><p id="m_header_title"></p> <span class="close" onclick="document.getElementById('modal').style.display = 'none'">&#x2715;</span></div>
        <div class="m_footer">
                <button class="archive" onclick="archive()">Archive</button>
        </div>
    </div>
</div>

这是用于模态打开的JS -

function openModal(id_got){
    var modalOpen = document.getElementById('modal');
    modalOpen.style.display = "block";
    var i = id_got;
    var getId = this.document.getElementById(i);
    var modalHeader = this.document.getElementById('m_header_title');
    modalHeader.innerHTML = getId.innerHTML;
}

因此，如果点击第一个li并显示id="wa"模式，当我点击存档按钮时，带有li的{{1}}应该会消失（显示：无））。

Answer 1

<{1>}在openModal上保存全局变量中当前打开的元素id

currentOpened = id_got;

然后为结束事件

创建一个处理程序

var currentOpened; // global variable

function openModal(id_got){
    var modalOpen = document.getElementById('modal');
    modalOpen.style.display = "block";
    var i = id_got;
    currentOpened = id_got; // here's the add
    var getId = this.document.getElementById(i);
    var modalHeader = this.document.getElementById('m_header_title');
    modalHeader.innerHTML = getId.innerHTML;
}

function onModalClose() {
    document.getElementById(currentOpened).style.display = 'none;
}

而modal html

<div class="modal" id="modal">
    <div class="modal_content" id="modal_content">
        <div class="m_header"><p id="m_header_title"></p> <span class="close" onclick="onModalClose()">&#x2715;
    </span></div>
        <div class="m_footer">
            <button class="archive" onclick="archive()">Archive</button>
        </div>
    </div>
</div>

就是这样

Answer 2

打开模态时，将id保存在全局变量中，如

active_li = id_got;

当您点击存档您的li时，在您的方法中执行此操作：

function archive(){
    /*
    do your stuff
    */
    document.getElementById(active_li).style.display = 'none';           
}

从弹出按钮中删除列表元素

2 个答案: