使用 JavaScript onClick 关闭窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25260841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close a window with JavaScript onClick
提问by Simpleacc
On my website I have 4 Windows (identified by target1, target2, target3 and target4). On these Windows I want to add a button with a name of "close" and using an onClick event call the correct function depending on which window.
在我的网站上，我有 4 个 Windows（由 target1、target2、target3 和 target4 标识）。在这些 Windows 上，我想添加一个名称为“关闭”的按钮，并使用 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';
}
I'm sure there is a better way than this:
我相信有比这更好的方法：
function close_window(){
$(this).parents('div').style.display='none'
}
This will close only the window that has the event, but it doesn't work.
这将仅关闭具有该事件的窗口，但它不起作用。
Could someone help me please?
有人可以帮我吗？
采纳答案by Michael Schneider
if i understand that correctly you can simply use this:
如果我理解正确，你可以简单地使用这个：
var windows = $('#target1, #target2, #target3, #target4');
windows.on('click', function() {
$(this).hide();
});
You should consider giving the button an class:
你应该考虑给按钮一个类：
HTML
HTML
<div class="windows">
<button class="close_window">X</button>
</div>
JS
JS
var closeButtons = $('.close_window');
closeButtons.on('click', function() {
$(this).parent().hide();
});
Then you can get actually the goal you want :-)
然后你就可以真正达到你想要的目标:-)
Regards
问候
回答by icke
You could start by making the id a parameter of the function like so:
您可以首先将 id 设为函数的参数，如下所示：
function close_window(id) {
document.getElementById(id).style.display = 'none';
}
That way your button's onclick would have to look something like this: "close_window('target1')"
这样你的按钮的 onclick 就必须看起来像这样：“close_window('target1')”
You could also find the window to close by going up the DOM starting from the button. To give you an example for that we would need to see the actual HTML.
您还可以通过从按钮开始向上移动 DOM 来找到要关闭的窗口。为了给你一个例子，我们需要看到实际的 HTML。
回答by user2285312
Please check the fiddle
请检查小提琴
Add a common class for the windows and close button.
为窗口和关闭按钮添加一个公共类。
$('.close').click(function(){
$(this).parents('.window').css('display','none');
});
});
This should work
这应该工作
回答by debute
I imagined code like this:
我想象的代码是这样的：
<div class="window" id="target2">
<p>TEXT</p>
<a href="#">Close</a>
</div>
If you have code like this, you can use $('.window a').click();to catch click event
如果你有这样的代码，你可以$('.window a').click();用来捕捉点击事件
then get parent var parentWindow = $(this).parent();
然后得到父母 var parentWindow = $(this).parent();
(for testing, you can get window ID via parentWindow.prop('id');)
（为了测试，您可以通过 获取窗口 ID parentWindow.prop('id');）
and finally close/hide/fade... parentWindow.fadeOut();
最后关闭/隐藏/淡出... parentWindow.fadeOut();
Here is DEMO
这是演示
