Question

在我的网站上，我有4个Windows（由target1，target2，target3和target4标识）。在这些Windows上，我想添加一个名为＆＃34;关闭＆＃34;的按钮。并使用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'
}

这将仅关闭包含该事件的窗口，但它不起作用。

有人能帮帮我吗？

Answer 1

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

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

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

<强> HTML

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

<强> JS

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

然后你可以得到你想要的目标： - ）

此致

Answer 2

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

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

这样你按钮的onclick必须看起来像这样：“close_window（'target1'）”

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

Answer 3

请检查小提琴

http://jsfiddle.net/7s49z1zn/

为Windows添加公共类并关闭按钮。

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

}）;

这应该有效

Answer 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

使用JavaScript onClick关闭一个窗口

4 个答案: