0

私はいくつかの JavaScript を学び、このチュートリアルを通じて自分の Web ページのモーダルを作成しようとしていました。独自の JavaScript モーダル プラグインを構築する

彼がIDで要素をキャッチし、クリック時にモーダルを開くはずのアンカータグが複数あることに気付いたとき、実際に問題が発生しました。IDを名前に変更しようとしましたが、次のコードを取得し、1つしか機能せず、解決策が見つからないことに気付きました。何時間も探していました。

要素を別の方法でキャッチする方法、またはこれを解決する方法について提案がある場合は、役に立ちます。

var triggerButton = document.getElementsByName('trigger');

triggerButton[0].addEventListener('click', function() {
myModal.open();

triggerButton[1].addEventListener('click', function() {
myModal.open(); // if i put like this etc all my links work and etc.


});
4

2 に答える 2

2

まず第一に、これには属性を使用するのが最善ですclass:

<a class="trigger"> ... </a>

次に、JS で次のように取得します。

var triggerButtons = document.getElementsByClassName("trigger");

次に、それぞれをループして、行ったようにイベント リスナーを追加します。

for(var i = 0; i < triggerButtons.length; i++) {
    triggerButton[i].addEventListener('click', function() {
        myModal.open();
    });
}

(これは実際の JS の例です。)

これは動的であり、要素ごとにイベント リスナーを手動で追加するよりもはるかに簡単です。

jQuery でこれを行う場合は、はるかに簡単です。このワンライナーでこれをすべて達成できます。

$(".triggerButtons").click(function(){myModal.open();});

(これは jQuery の例です。)

于 2015-10-30T03:18:31.270 に答える
0

最も簡単な方法は、querySelectorAll 関数で必要なものを選択することです。

document.querySelectorAll('.trigger')

また

document.querySelectorAll('a[trigger]') 

with html like this

<a href="//blah" trigger="haha"></a>

"document.querySelectorAll" は CSS セレクターを取ります。したがって、CSS クエリで必要なアイテムを選択できる場合は、document.querySelectorAll() で選択できます。

これで、querySelectorAll は、クエリに一致する項目の配列を返します。一致するものがない場合は、空の配列が返されます。10 個の一致がある場合、それらはすべて配列に含まれます。

1 つの要素だけに一致させたい場合は、document.querySelector() を使用できます (すべてを除外します)。これにより、要素が 1 つだけ選択されます。また、CSS セレクターを渡すことで、同じように機能します。

于 2015-10-30T03:22:01.830 に答える