使用 JavaScript onClick 关闭窗口答案

【问题标题】：Close a window with JavaScript onClick使用 JavaScript onClick 关闭窗口
【发布时间】：2014-10-05 07:38:17
【问题描述】：

在我的网站上，我有 4 个 Windows（由 target1、target2、target3 和 target4 标识）。在这些 Windows 上，我想添加一个名为“close”的按钮，并使用 onClick 事件调用正确的函数，具体取决于哪个窗口。

function close_window1(){
    document.getElementById('target1').style.display = 'none';  
}

function close_window2(){
    document.getElementById('target2').style.display = 'none';  
}

function close_window3(){
    document.getElementById('target3').style.display = 'none';  
}

function close_window4(){
    document.getElementById('target4').style.display = 'none';  
}

我相信还有比这更好的方法：

function close_window(){
    $(this).parents('div').style.display='none'
}

这将只关闭有事件的窗口，但它不起作用。

有人可以帮帮我吗？

【问题讨论】：

标签： javascript html function window call

【解决方案1】：

如果我理解正确，您可以简单地使用它：

var windows = $('#target1, #target2, #target3, #target4');
windows.on('click', function() {
  $(this).hide();
});

你应该考虑给按钮一个类：

HTML

<div class="windows">
 <button class="close_window">X</button>
</div>

var closeButtons = $('.close_window');
closeButtons.on('click', function() {
  $(this).parent().hide();
});

然后你就可以得到你真正想要的目标:-)

问候

【讨论】：

不是全部，我只想关闭1个窗口（我做onlcick事件的窗口）
JS 必须加在 HTML 的头部还是可以加在 .js 文件中？
如你所愿。我基本上喜欢把html和js分开。
是的，这个功能最简单^^

【解决方案2】：

您可以先将 id 作为函数的参数，如下所示：

function close_window(id) {
    document.getElementById(id).style.display = 'none';
}

这样，您的按钮的 onclick 必须如下所示：“close_window('target1')”

您还可以通过从按钮开始向上移动 DOM 来找到要关闭的窗口。为了给你一个例子，我们需要查看实际的 HTML。

【讨论】：

【解决方案3】：

请检查小提琴

http://jsfiddle.net/7s49z1zn/

为窗口和关闭按钮添加一个通用类。

$('.close').click(function(){
    $(this).parents('.window').css('display','none');

});

这应该可以工作

【讨论】：

【解决方案4】：

我想象的代码是这样的：

<div class="window" id="target2">
    <p>TEXT</p>
    <a href="#">Close</a>
</div>

如果你有这样的代码，你可以使用$('.window a').click();来捕捉点击事件

然后获取父级var parentWindow = $(this).parent();

（为了测试，可以通过parentWindow.prop('id');获取窗口ID）

最后关闭/隐藏/淡出...parentWindow.fadeOut();

这里是DEMO

【讨论】：