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

是

您可以在页面的其他位置创建JavaScript：

定义onclick handlder函数“deleteMe（）”
- 该函数可以访问this变量，该变量将指向被点击的DOM的<a>元素。
- 从中可以将DOM向上移动到父元素，以找到正确的方框div DOM元素
- 然后将该框div的样式从block更改为hidden
然后你的JS应该使用ID="box"循环遍历每个元素（我认为你不能用getElementById()来完成它所以你可能需要对包含节点的DOM子元素进行循环）。对于每个盒子DIV：
- 通过firstChild（）找到DOM中的第一个子节点 - 这将是<a> DOM元素。
- 将上述onclick handlder函数“deleteMe（）”分配给<a> DOM元素。

请注意，我建议修复HTML以获得唯一ID。你没有必要让它们与众不同，但设计更好。

您使用重复ID的内容应通过类处理。

Answer 2

我不会使用HREF来启动事件，我只会使用DIV。但是，如果你想继续使用HREFS，你可以使用preventDefault函数阻止HREF继续进行。

这是一个让你开始的JSFiddle： http://jsfiddle.net/PbzYz/

Answer 3

我假设你是一个新手所以也许你会发现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这是一个坏习惯，在使用id不止一次时，如果它们被设计成独一无二，那么在你尝试的时候，类是最好的选择。

Answer 4

您需要解决的首要问题是重复的id值。你不应该复制这些。而是使用class存储值“box”。

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

此外，您的<a href="delete">应该是<a class="delete">。以下假设您已进行了这些更改。

接下来，我们需要收集对具有“delete”类名的所有链接的引用，并将它们绑定到一个处理程序，该处理程序将删除或隐藏其父div。

// 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 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上传到服务器。

单击其中的链接时隐藏div

5 个答案: