隐藏DIV当点击它

Question

我的代码中的链接与此类似：

<div id="box"> 
    <a href="delete">delete</a> 
</div> 
<div id="box"> 
    <a href="delete">delete</a> 
</div> 
<div id="box"> 
    <a href="delete">delete</a> 
</div> 

我想隐藏在点击第一个div里面的链接，同为第二和第三的div上。有没有办法做到这一点，而无需更改此代码？

Answer 1

我不会使用HREF来启动事件，我会简单地使用DIV。如果您想继续使用HREFS，则可以使用preventDefault函数来阻止HREF继续执行。

这里是一个的jsfiddle开始你出去： http://jsfiddle.net/PbzYz/

Answer 2

是。

你在其他地方，其在页面上创建JavaScript的：

1. 定义一个onclick handlder功能 “DELETEME（）”

   • 的功能将有机会获得this变量，它指向<a>元素被点击的DOM的。

   • 从中你可以走了DOM父元素，找到正确的框格的DOM元素

   • 然后那个盒子div的风格改变从block到hidden

2. 然后您的JS应该通过与ID="box"每一个元素循环（我不认为你可以getElementById()做，所以你可能需要在包含节点的DOM孩子太环路）。对于每个盒子的DIV：

   • 查找通过则firstChild（）在DOM它的第一个孩子 - 这将是<a> DOM元素。

   • 将上述onclick handlder函数“deleteMe（）”分配给<a> DOM元素。

---

请注意，我会建议固定HTML有唯一的ID。你不必让它们独一无二，但它更好的设计明智。

您使用重复的ID为应通过类来处理什么。

Answer 3

你需要解决的第一件事情是重复id值。你不应该复制这些。而是使用class来存储“框”的值。

<div class="box"><!-- ... --></div> 
<div class="box"><!-- ... --></div> 

此外，您<a href="delete">也许应该<a class="delete">。以下假定您已经做出这些更改。

接下来，我们需要聚集到具有“删除”类名的所有链接参考，并绑定到他们的处理程序，将要么删除，或隐藏他们的父母格。

// Get collection of all anchors 
var anchors = document.getElementsByTagName("a"); 

// Iterate over the collection 
for (var i = 0; i < anchors.length; i++) { 

    // Create an 'alias' for the current anchor being considered 
    var currentA = anchors[i]; 

    // Is this one of our '.delete' anchors? 
    if (currentA.className == "delete") { 

    // Does this browser support addEventListener? 
    if (currentA.addEventListener) { 

     // Add an event handler via addEventListener 
     currentA.addEventListener("click", deleteParent, false); 

    // Or, does this browser use attachEvent? 
    } else if (currentA.attachEvent) { 

     // Add an event handler using attachEvent 
     currentA.attachEvent("onclick", deleteParent); 

    } 

    } 

} 

我们所做的事情是循环遍历所有的锚，并测试它们是否具有“删除”作为它们的类名。如果他们这样做，我们继续做一下功能检测以查看浏览器是否支持addEventListener方法。如果是这样，我们将deleteParent附加到此元素的click方法。如果addEventListener方法不可用，我们回退以检查attachEvent是否为。

有了这个，我们现在需要创建函数deleteParent，每当链接被点击时，这个函数将被调用。

该函数需要获取对其引用的链接的引用，然后抓取其父代父节点，直到找到具有“box”类的链接。当它发现，它隐藏它：

// This function handles the "click" event of our '.delete' anchors 
function deleteParent(event) { 

    // Determine which element invoked this function 
    var link = event.target || window.event.srcElement; 
    /* In modern browsers, the event object is passed directly into 
    the handler. This is why we can say event.target and learn 
    which element invoked the click. In some older browsers 
    the event object isn't passed into the handler, but instead 
    is only accessible through the global window object. 
    This code looks in both places just to be safe. */ 

    // Get initial guess to who '.box' is 
    var parent = link.parentNode; 

    // Move up the parent list until we find '.box' 
    while (parent.className != "box") 
    parent = parent.parentNode; 

    // Now that we've found '.box', hide it 
    parent.style.display = "none"; 

    // Prevent anchor form navigating away from page 
    if (event && event.preventDefault) { 
    event.preventDefault(); 
    } else { 
    window.event.returnValue = false; 
    } 
    /* Similar to the first line of code within this function, 
    This portion checks to see if an event object exists 
    (meaning a modern browser is being used) and if that 
    event has the preventDefault method. If it does, we 
    invoke that method. On the other hand, if that event 
    object didn't exist, we assume it must exist on the 
    window object, and that it must have a property of 
    returnValue, which we then set to "false". */ 

} 

您可以通过在线例子进一步研究此解决方案：http://jsbin.com/azilif/8/edit#javascript,html

Answer 4

我假设你是新手所以也许你会发现更容易的JQuery基本上使用简化了JavaScript并使代码更易于使用。

这里是你将如何在JQuery中

代码这个

<script src="jquery-1.7.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $("a").click(function() { //Onclick <a></a> 
     $(this).parent().hide(); //Hide it's parent 
     return false; //stops the link from submiting 
    }); 

}); 
</script> 

你可以用普通的JavaScript做到这一点的例子，但我更喜欢JQuery的，特别是如果你打算做了很多JS编码。

我也同意DVK在使用身份证的时候不止一次地使用身份证，这是一个不好的习惯，当你设计的唯一身份证时，课程对你来说是最好的选择。

Answer 5

您可以在HTML页面的头部使用JQuery。

首先，您需要将盒子的ID设置为唯一，或者单击一个删除链接将删除所有盒子。

如果你让你的HTML看起来像这样：

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $("#delete1").click(function(){ 
    $("#box1").hide(); 
    }); 

    $("#delete2").click(function(){ 
    $("#box2").hide(); 
    }); 

    $("#delete3").click(function(){ 
    $("#box3").hide(); 
    }); 
}); 
</script> 
</head> 

<body> 
<div id="box1"> 
     <a id="delete1">delete</a> 
    </div> 
    <div id="box2"> 
     <a id="delete2">delete</a> 
    </div> 
    <div id="box3"> 
     <a id="delete3">delete</a> 
    </div> 
</body> 
</html> 

了jQuery需要的是在文档中。您可能需要确保将最新版本的jquery.js上传到您的服务器。