0

我的代码与此类似：

<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 也是如此。有没有办法在不更改此代码的情况下做到这一点？

4

5 回答 5

5

是的。

您在页面的其他地方创建 JavaScript：

  1. 定义一个 onclick 处理函数“deleteMe()”

    • 该函数将有权访问this变量，该变量将指向<a>被单击的 DOM 元素。

    • 您可以从中向上走 DOM 到父元素，以找到正确的 box div DOM 元素

    • 然后将该框div的样式从更改block为hidden

  2. 然后你的 JS 应该循环遍历每个元素ID="box"（我认为你不能这样做，getElementById()所以你可能需要循环遍历包含节点的 DOM 子节点）。对于每个框 DIV：

    • 通过 firstChild() 在 DOM 中找到它的第一个子元素 - 这将是<a>DOM 元素。

    • 将上述 onclick 处理函数“deleteMe()”分配给<a>DOM 元素。

请注意，我建议将 HTML 修复为具有唯一 ID。你不必让它们独一无二，但它是更好的设计明智的。

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

于 2012-05-07T14:51:53.747 回答
2

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

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

于 2012-05-07T15:21:34.770 回答
1

我假设您是新手，所以也许您会发现 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 时养成一个坏习惯，因为它们的设计是独一无二的，当涉及到你正在尝试的东西时，类将是你的最佳选择。

于 2012-05-07T15:09:15.760 回答
0

您需要解决的第一件事是重复id值。你不应该复制这些。相反，用于class存储值“box”。

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

此外，您<a href="delete">可能应该是<a class="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

于 2012-05-07T15:08:06.897 回答
0

您可以在 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 上传到您的服务器。

于 2012-05-07T15:17:29.403 回答