0

同じ機能をトリガーする 2 つのアンカー タグ (つまり、ナビゲーション バーを閉じるための複数のボタン) がある場合、両方の要素をイベントにバインドするにはどうすればよいでしょうか? いいえ

html:

<a href="#" id="ctl_one">Close Nav</a>
<ul id="nav">
  <li>Nav One</li>
  <li>Nav Two</li>
  <li>Nav Three</li>
</ul>
<a href="#" id="ctl_two">Close Nav</a>

JS:

var ctlOne = document.getElementById("ctl_one");
var ctlTwo = document.getElementById("ctl_two");
var both = ctlOne || ctlTwo //<-- this is what I tried and failed.

both.onClick = function(){
  toggleNav();
}

function toggleNav(){
  // either close or open nav <UL>
}

繰り返しますが、jQuery でそれを行う方法を知っています。ネイティブの JavaScript メソッドを探しています。

4

3 に答える 3

4 
var ctlOne = document.getElementById("ctl_one");
var ctlTwo = document.getElementById("ctl_two");

ctlOne.onClick = ctlTwo.onclick = toggleNav;
于 2013-08-20T19:27:38.123 に答える
3

1行でそれを行うことはできませんが、何がこれを妨げているのかわかりません:

ctlOne.onClick = toggleNav;
ctlTwo.onClick = toggleNav;

または、よりドライ:

var both = [ctlOne, ctlTwo];
for (var i=0; i<both.length; i++) {
    both[i].onClick = toggleNav;
}
于 2013-08-20T19:27:42.807 に答える
-2

複数のアイテムに対する REAL ONE eventHandler

同じ関数を必要とするリストまたはグリッドを作成するときは、1 つのイベントハンドラーのみを使用し、そのハンドラー内で何をすべきかを決定します。

1 つのイベント ハンドラーをヒービングするということは、コードをアンロードする場合、ハンドラーを 1 つだけ削除する必要があることを意味しますが、使用するリソースも大幅に少なくなり、コードの更新がより簡単になります。

あなたの場合、クリックされたliのインデックスを取得し、toggleNav関数を実行する必要があるかどうかを確認するために、長い関数(スライス呼び出し...)を含める必要がありました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
(function(W){
var D;
function init(){
 D=W.document;
 D.getElementById('ul').addEventListener('click',h,false);
}
function h(e){
 var a=e.target,i=Array.prototype.slice.call(a.parentNode.childNodes).indexOf(a);
 if(a.parentNode.id=='ul'){
  console.log('text: ',a.textContent,' index: ',i,' execute toggleNav: ',i<2);
 }
}
W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<ul id="ul"><li>a</li><li>b</li><li>c</li></ul>
</body>
</html>

ご覧のとおり、コードは短く、ループはありません。しかし、何よりも、ハンドラーは 1 つしかありません!!

これは当然、最新のブラウザーでのみ機能しますが、いくつかの変更を加えれば、すべてのブラウザーで同じように機能すると思いますe=e||window.event; e.target=e.target||e.srcElement..

編集

マットの要求に応じて、どこでも長い変数名と空白を使用した単純な例ですが、上記の例を使用すると、さまざまな要素がキャッシュされ、拡張した場合でも外部ライブラリと互換性があります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function inizializzation () { // Here i inizialize the eventhandler
 var TheULElement=window.document.getElementById('ul'); // search
 //  for the element which id is ul
 TheULElement.addEventListener ( 'click' , clickhandler , false )
 // here i add an event handler to the element which id is ul
}
function clickhandler ( clickevent ) { // that handler i previously added
 if ( clickevent.target.parentNode.id == 'ul' ) { // here i check if the 
  // parent node  id of the element i clicked is ul
  console.log( clickevent.target.textContent );
  // this writes to the console 
  //-> rigthclick 'inspect element' (in chrome) 
 }
}
window.addEventListener ( 'load' , inizializzation , false )
 // this is the event handler when the page loads
 // which starts the first function called inizializzation
</script>
</head>
<body>
<ul id="ul">
 <li>a</li>
 <li>b</li>
 <li>c</li>
 <li>d</li>
 <li>e</li>
 <li>f</li>
 <li>g</li>
 <li>h</li>
 <li>i</li>
</ul>
</body>
</html>

この答えのポイントは、2つの要素だけでなく複数の要素を処理することです

そして、それは質問のタイトルを反映しています

単一の関数を複数の要素にアタッチするにはどうすればよいですか?

または複数の要素を含む複数の要素。

その場合、大きなグリッドのように考える必要があります

行はliです

このliの中に、ボタンのスパンなどを追加でき、その単一のイベントハンドラーだけでそれらをすべて制御できます。

行/列番号または想像力が提供するものに基づいています。

cols/rows では、ハンドラはparentNode の prantNode にあります。

if ( clickevent.target.parentNode.parentNode.id == 'ul' ) {
 console.log( clickevent.target.textContent );
}

行/列は次のようになります

<ul> // whatever (div span) it just has to be a element 
 <li> // whatever ,best if display:block/flex on all thiselements but 
  <whatever></whatever>  // but with WHITESPACES this does not work
  <whatever></whatever> // so it's better you add them with a script
  <whatever></whatever> // or learn to write without WHITESPACES
  <whatever></whatever> // or new lines.
  <whatever></whatever> // because a textnode/newline/whitespace
 </li> // in dom is a ELEMENT
 <li>
  <whatever></whatever>
  <whatever></whatever>
  <whatever></whatever>
  <whatever></whatever>
  <whatever></whatever>
 </li>
</ul>

ループはありますか？番号。

ps .: この質問には既に緑色のフラグが設定されているため、回答しましたが、私の言語は英語ではないので、自由にテキストを修正してください。しかし、私のコードには触れないでください。

于 2013-08-20T20:20:30.410 に答える