0

私は2つの地図を持っています：

var map1 = document.id('map1');
var map2 = document.id('map2');

2番目のマップは非表示になっています。

map2.setStyle('display','none');

最初のマップには、一意のIDを持つ要素（リンク）があります-この要素がクリックされたときに別の関数を実行したいと思います（最初のマップを非表示にして2番目のマップを表示します）。

私は持っています：

  var links = document.id('map1').getElements('a');     

  links.each(function(link) { 
  link.addEvent('click', function(e) {
   e.stop();
    //do something with links
  });

私はそのような方法で試みます：

var unique_link = document.id('my_unique_id').getElements('a');

unique_link.addEvent("click", function(){
links.removeEvent('click');
map1.setStyle('display','none');
map2.setStyle('display','block');
var links = document.id('map2').getElements('a'); 
});

しかし、この一意の要素をクリックすると、最初の関数はまだ実行されています。

4

2 に答える 2

1

私の問題の理解は、マップを切り替えようとしていることです。切り替えると、クリックイベントハンドラーがマップリンクにアタッチされます。

最初に切り替えるには、どちらが表示されているかを追跡して、適切に非表示にし、もう一方を表示できるようにします。

var unique_link = $$('#my_unique_id a'),
    // keep track of which map is visible
    currentMap = map1;

unique_link.addEvent('click', function(e){
    // Prevent the default behavior, but still allow bubbling of events
    e.preventDefault();

    // Hide the current map
    currentMap.setStyle('display', 'none');

    // store the correct map by comparing the two maps and making it visible
    currentMap = (currentMap == map1 ? map2 : map1).setStyle('display', 'block');

});

明確にするために、currentMap = (currentMap == map1 ? map2 : map1)三項演算と呼ばれます。if / elseの省略形で、次のように書き直すことができます。

if (currentMap == map1) {
    currentMap = map2;
} else {
    currentMap = map1;
}

currentMap.setStyle('display', 'block');

次に、なぜ各マップのリンク上のイベントを削除する必要があるのですか？マップを切り替えるときに、それらは接続されたままになりませんでしたか？

最後に、イベントの委任とクリック時の値へのアクセスについて質問しました。これがMooToolsでどのように機能するかの例です：

// We pass an array of map1 and map2 through $$ to make sure that the returned value is an element collection
// So we can use addEvent on both elements.

// The event "type" we would have passed to addEvent has changed, using a psuedo event called "relay", which handles event delegation
// It takes a selector for matching elements

// The function that is passed to addEvent has two arugments, e, which is the event object, and element, which is the element that the
// event is being delegated to.
$$([map1, map2]).addEvent('click:relay(a)', function(e, element){
    // Prevent the default behavior of the anchors
    e.preventDefault();

    // element argument is the anchor. So you can access it this way.
   element.get('href');

   // or "this" can also be used.
   this.get('href');

});
于 2012-06-15T00:07:50.763 に答える
1

Element.removeEventこのようには機能しません。イベント (クリック) の名前とそれを処理する関数の両方を渡す必要があります。これは、clickが起動されたときに呼び出される関数が複数ある可能性があるためです。を使用Element.removeEventsしてすべてのクリック処理関数を削除できますが、これは本当に必要なものではない可能性があります (ただし、おそらく問題ありません)。最善を尽くすには、次のようにします。

var handler = function(e) { e.stop(); /* do something with links */ }),
    links = document.id('map1').getElements('a');

links.addEvent('click', handler);

document.id('my_unique_id').getElements('a').addEvent('click', function() {
    links.removeEvent('click', handler);
    /* Other stuff */
});

ああ、ちなみに、これ：

document.id('some_id').getElements('.some-selector');

次のように記述できます。

$$('#some_id .some-selector');
于 2012-06-14T08:07:33.400 に答える