Javascript &引用；“代表”；在jQuery中隐藏操作？Can'；不匹配简单的元素

标题有点乱，所以我在这里澄清一下。我有一套按钮，它们必须相互作用。例如，当单击“编辑”按钮时，该按钮消失，而出现“保存”按钮。还有另一个删除按钮，它实际上删除了一些内容，但是当我们处于编辑模式时（当保存按钮出现时），删除按钮的功能切换并成为编辑模式的关闭按钮。这是网络世界中常见的一种情况

但是，当单击保存按钮或单击关闭编辑模式按钮时，我会遇到一点小麻烦。我不能通过jQuery让它消失

因此，要将其分解为多个步骤，如下所示：

• 用户单击“编辑”
• 用户在UI中得到一些细微的更改：编辑按钮消失，保存按钮出现
• 用户在编辑时可以随心所欲
• 用户点击保存或关闭完成编辑
• 保存按钮仍保留在UI中

我明确地告诉jQuery在用户完成操作后隐藏该按钮，并且我已经尝试了一百万种方法来隐藏它，从使用类名作为选择器的简单的

hide（）

开始，然后使用

e.delegateTarget

，但都没有成功

要查看我的实际问题，请参阅以下JSFiddle:

（注意右边的Close按钮。我猜它在引导3中的位置是

absolute

。）

---

如何在点击“保存”（自身）或“关闭/删除”时使“保存”按钮消失？

即使e.target.style.display='none'将起作用。。我把一把小提琴放在一起（使用纯JS）供您审阅和采纳

JS

---

小贴士：治疗iditis的常用方法是使用公共类。您希望将其删除还是隐藏？如果您想将其隐藏，只需在

approve edit中添加
$（this）.hide（）
，然后单击事件…e.target.style.display='none'@cale\u b我用
$（这个）
试过了，但它没有隐藏它。还有第二种情况，关闭/删除按钮隐藏了保存按钮，因此我显然不能在那里使用
$（this）
。请注意，事件处理程序中有console.log。。在完成调试后，您可能希望删除它。jQuery应该可以正常工作。我以前在这些上下文中使用过它（也就是说，作用于窗口的外部js文件）。。您的问题主要是因为“批准编辑保存”按钮在类名中也有“编辑”按钮。。这是您指示的。show（）；在你试图隐藏e.delegateTarget的努力之下。。等等，这里。。我已经更新了您的代码，只需将您的save button类修改为“save approve edit”即可：
(function(window){
    window.ImgBoxTool = {
        'boxes': null,
        'init' : function () {
            ImgBoxTool.boxes = document.querySelectorAll('div.img-box');
            for (i=0; i < ImgBoxTool.boxes.length; i++) {
                ImgBoxTool.boxes[i].querySelector('button.edit').addEventListener('click', ImgBoxTool.Handlers.onEditBtnClick, false);
                ImgBoxTool.boxes[i].querySelector('button.save').addEventListener('click', ImgBoxTool.Handlers.onSaveBtnClick, false);
                ImgBoxTool.boxes[i].querySelector('button.close').addEventListener('click', ImgBoxTool.Handlers.onCancelBtnClick, false);
            }
        }
    }
    window.ImgBoxTool.Handlers = {
        'onEditBtnClick' : function (e) {
            e.preventDefault();

            var image_id = e.target.id || e.target.parentElement.id || e.target.parentElement.parentElement.id;
            var elm = document.getElementById(image_id);
            elm.className = elm.className.replace('edit-mode','').replace('  ', ' ') + ' edit-mode';

            elm.querySelector('.edit').style.display = 'none';                    
            elm.querySelector('.save').style.display = 'block';

            elm.querySelector('.close').className = elm.querySelector('.close').className.replace('delete-img-box','').replace('  ',' ') + ' close-edit-mode';
            console.log('[ImgBox] %o \n\t %o',elm,e);
        },
        'onSaveBtnClick' : function (e) {
            e.preventDefault();
            var image_id = e.target.id || e.target.parentElement.id || e.target.parentElement.parentElement.id;
            var elm = document.getElementById(image_id);
            elm.className = elm.className.replace('edit-mode','').replace('  ', ' ');
            elm.className = elm.className.replace('modified','').replace('  ', ' ') + ' modified';



            elm.querySelector('.edit').style.display = 'block';                      
            elm.querySelector('.save').style.display = 'none';

            elm.querySelector('.close').className = elm.querySelector('.close').className.replace('close-edit-mode','').replace('  ',' ') + ' delete-img-box';

            console.log('[ImgBox] %o \n\t %o',elm,e);
        },
        'onCancelBtnClick' : function (e) {
            e.preventDefault();

            var image_id = e.target.id || e.target.parentElement.id || e.target.parentElement.parentElement.id;
            var elm = document.getElementById(image_id);
            elm.className = elm.className.replace('edit-mode','').replace('  ', ' ');

            elm.querySelector('.edit').style.display = 'block';                      
            elm.querySelector('.save').style.display = 'none';

            elm.querySelector('.close').className = elm.querySelector('.close').className.replace('close-edit-mode','').replace('  ',' ') + ' delete-img-box';
            console.log('[ImgBox] %o \n\t %o',elm,e);
        }
    }                                                                       
}(window));
        ImgBoxTool.init();

<div id="1" class="img-box">
<hr />
    <button class="edit edit-img-box" aria-hidden="true">Edit</button>
    <button class="save approve-edit" aria-hidden="true">Save</button>
    <button class="close delete-img-box" aria-hidden="true">&times;</button>
</div>
<div id="2" class="img-box">
<hr />
    <button class="edit edit-img-box" aria-hidden="true">Edit</button>
    <button class="save approve-edit" aria-hidden="true">Save</button>
    <button class="close delete-img-box" aria-hidden="true">&times;</button>
</div>

button.close.delete-img-box {background-color:red;color:white;}

div.img-box {clear:both;overflow:visible;padding:1em;position:relative;min-height:8em;background-color:whitesmoke;border:0.1em outset whitesmoke;}
div.img-box:nth-child(even) {margin-bottom:1em;box-shadow:inset 0em -2em 8em -4em rgba(0,0,0,0.3);}
div.img-box:nth-child(odd) {margin-bottom:1em;box-shadow:inset 0em -2em 8em -4em rgba(0,0,0,0.8);}
div.img-box:last-child {margin-bottom:0em;}

button {box-shadow:inset 0em -2em 2.5em -2em rgba(0,0,0,0.6);text-shadow:0.05em 0.08em 0.11em rgba(182,182,182,0.6);cursor:pointer;}
button:hover {}
button.save, button.edit {position:absolute;left:0;bottom:0;font-size:1.2em;padding:0.25em 0.5em;text-align:left;}

button.edit {display:block;}
button.save {display:none;}
button.close, button.cancel {position:absolute;right:0;top:0;display:block;font-size:2em;height:1.25em;line-height:1.25em;width:2em;}



div.img-box.edit-mode { background: orange; color: black;border-color: black;}

div.img-box.edit-mode > button.edit {display:block;}
div.img-box.edit-mode > button.save {display:none;}
div.img-box hr {box-shadow:0.1em -0.1em 0.7em rgba(0,0,0,0.2);position:absolute;top:2em;left:0em;right:0em;width:auto;}
div.img-box.modified hr { background: #f0c36d; color: #f0c36d;border-color: #f0c36d;}