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>

2番目と3番目のdivについても同じように、その中のリンクをクリックして最初のdivを非表示にします。このコードを変更せずにそれを行う方法はありますか？

4

5 に答える 5

5

はい。

ページの別の場所で次のような JavaScript を作成します。

  1. onclick ハンドラ関数「deleteMe()」を定義

    • この関数は、クリックされた DOMthisの要素を指す変数にアクセスできます。<a>

    • そこから DOM を親要素に移動して、正しいボックス div DOM 要素を見つけることができます

    • 次に、そのボックス div のスタイルを からblockに変更しますhidden

  2. 次に、JSはすべての要素をループする必要がありID="box"ます（これを使用できるとは思わないgetElementById()ので、ノードを含むDOMの子をループする必要があるかもしれません）。各ボックス DIV について:

    • firstChild() を介して DOM 内の最初の子を見つけます。これが<a>DOM 要素になります。

    • 上記の onclick ハンドラ関数「deleteMe()」を<a>DOM 要素に割り当てます。

一意の ID を持つように HTML を修正することをお勧めします。それらを一意にする必要はありませんが、設計上は優れています。

重複した 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で実行できますが、JSで多くのコーディングを行う場合は特に、JQueryを使用することをお勧めします。

また、DVKに同意します。これは、一意になるように設計されたIDを複数回使用する場合に使用するのは悪い習慣です。試行していることに関しては、クラスが最適なオプションです。

于 2012-05-07T15:09:15.760 に答える
0

HTML ページの head 内で JQuery を使用できます。

まず、ボックスの ID を一意にする必要があります。そうしないと、1 つの削除リンクをクリックすると、すべてのボックスが削除されます。

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 に答える
0

最初に対処する必要があるのは、重複する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、リンクがクリックされるたびに呼び出される関数を作成する必要があります。

この関数は、それを呼び出したリンクへの参照を取得する必要があり、クラス「ボックス」を持つリンクが見つかるまで親の親をクロールします。それが見つかると、それを非表示にします。

// 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 に答える