4

私はクラスを持つ3つのdivを持っています：wpEditとonClick：alertName（）

<div class="wpEdit" onClick="alertName()">Bruce Lee</div>
<div class="wpEdit" onClick="alertName()">Jackie Chan</div>
<div class="wpEdit" onClick="alertName()">Jet li</div>

クリックすると、クリックしたDivのクラスwpEditのインデックスを知りたいです。

function alertName(){
    //Something like this
    var classIndex = this.className.index; // This obviously dosnt work
    alert(classIndex); 
}

ブルース・リーをクリックするとアラート：0ジャッキー・チェンをクリックするとアラート：1ジェット・リーをクリックするとアラート：2

class="wpEdit"のどのインスタンスがクリックされているかを知る必要があります

4

5 に答える 5

5

これを試して

function clickedClassHandler(name,callback) {

    // apply click handler to all elements with matching className
    var allElements = document.body.getElementsByTagName("*");

    for(var x = 0, len = allElements.length; x < len; x++) {
        if(allElements[x].className == name) {
            allElements[x].onclick = handleClick;
        }
    }

    function handleClick() {
        var elmParent = this.parentNode;
        var parentChilds = elmParent.childNodes;
        var index = 0;

        for(var x = 0; x < parentChilds.length; x++) {
            if(parentChilds[x] == this) {
                break;
            }

            if(parentChilds[x].className == name) {
                index++;
            }
        }

        callback.call(this,index);
    }
}

使用法：

clickedClassHandler("wpEdit",function(index){
    // do something with the index
    alert(index);

    // 'this' refers to the element 
    // so you could do something with the element itself
    this.style.backgroundColor = 'orange';
});
于 2012-12-01T10:05:12.510 に答える
2

コードで最初に対処したいのは、インラインHTMLバインディングです。

各要素で使用することも、イベントの委任document.addEventListenerに依存することもできます。

広く使用されているイベント委任の実装には、jQueryが付属しています。すでにjQueryを使用している場合は、これが最適な方法です。

あるいは、私自身の小さなdelegateユーティリティもあります。

const delegate = (fn, selector) => {
  return function handler(event) {
    const matchingEl = matches(event.target, selector, this);
    if(matchingEl != null){
      fn.call(matchingEl, event);
    }
  };
};

const matches = (target, selector, boundElement) => {
  if (target === boundElement){
    return null;
  }
  if (target.matches(selector)){
    return target;
  }
  if (target.parentNode){
    return matches(target.parentNode, selector, boundElement);
  }
  return null;
};

これは、イベントリスナーを登録する方法です。

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

そして、これは、イベントを生成した要素のインデックスを取得する方法です。

const handler = (event) => {
  console.log(Array.prototype.indexOf.call(event.currentTarget.children, event.target));
}

ライブデモ：

const delegate = (fn, selector) => {
  return function handler(event) {
    const matchingEl = matches(event.target, selector, this);
    if (matchingEl != null) {
      fn.call(matchingEl, event);
    }
  };
};

const matches = (target, selector, boundElement) => {
  if (target === boundElement) {
    return null;
  }
  if (target.matches(selector)) {
    return target;
  }
  if (target.parentNode) {
    return matches(target.parentNode, selector, boundElement);
  }
  return null;
};

const handler = (event) => {
  console.log(Array.prototype.indexOf.call(event.currentTarget.children, event.target));
}

document.getElementById('parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));
<div id="parent">
  <div class="wpEdit">Bruce Lee</div>
  <div class="wpEdit">Jackie Chan</div>
  <div class="wpEdit">Jet li</div>
</div>

于 2012-12-01T09:47:57.787 に答える
1

クラスwpEditに基づくdivのインデックスが必要な場合は、次のように実行できます。

HTML：

<div class="wpEdit">Bruce Lee</div>
<div class="wpEdit">Jackie Chan</div>
<div class="other">Other</div>
<div class="wpEdit">Jet li</div>

JS：

$(".wpEdit").bind("click", function(){
    var divs = $(".wpEdit");
    var curIdx = divs.index($(this));

    alert(curIdx);
});

実例： http： //jsfiddle.net/pJwzc/

jQueryのインデックス関数の詳細：http：//api.jquery.com/index/

于 2012-12-01T09:53:50.550 に答える
0

バニラジャバスクリプトを使用して、これは私のために働きます：

var wpEdits = document.querySelectorAll(".wpEdit");

for (let i = 0; i < wpEdits.length; i++)
  wpEdits[i].addEventListener("click", showID);

function showID(evt) {
  for (let i = 0; i < wpEdits.length; i++)
    if(wpEdits[i] == evt.target)    
      alert(i);
}

私はまだjsに慣れていないので、最善の解決策ではないかもしれません。

私はJSに非常に慣れていないので、次の説明を一粒の塩で行ってください。

（1行目）これはに似ていvar wpEdits = document.getElementsByClassName("wpEdit");ます。class="wpEdit"htmlファイルからのすべてのインスタンスをwpEdits変数に割り当てます。

（Line-3およびLine-4）この2行は、以下に定義されclass="wpEdit"ている関数を呼び出すためのクリックを引き起こします。showID()

（Line-6およびLine-10）クリックイベントが発生すると、ブラウザはクリックされているアイテムの一意のプロパティをevt変数に渡します。次に、これをforループで使用して、使用可能なすべてのインスタンスと段階的に比較します。はevt.target、実際のターゲットに到達するために使用されます。一致するものが見つかると、ユーザーに警告します。

CPU時間を無駄にしないためbreak;に、一致が見つかったらすぐにループを終了するためにaを実行することをお勧めします。

于 2018-12-26T04:51:36.500 に答える
0

なぜ人々が以前の回答に新しい機能を追加したのか理解できなかったので...

const wpEdit = document.getElementsByClassName('wpEdit');
for(let i = 0; i < wpEdit.length; i++){
  wpEdit[i].addEventListener('click',function(){
    alert(i);
  });
}

ループを使用して、「クリック」イベントを追加しました。そして[i]はすでに現在クリックされているクラスインデックスです...

フィドル

于 2019-04-05T21:54:01.097 に答える