2

簡単に言えば

こちらのデモをご覧ください。

私はいくつか持っているdiv.story-in-myworks

each 内div.story-in-myworksには、div.pageimage-div-overlayeach のオーバーレイを制御する がありますdiv.story-in-myworks。

それぞれの内部div.pageimage-div-overlayには、a.btn-storysettingを非表示および表示する責任がありdiv.storysettings_talkbubble_leftます。

a.btn-storysettingとの両方div.storysettings_talkbubble_leftが の子要素ですdiv.pageimage-div-overlay。

ここにスニペットがあります：

<div class="img-holder story-in-myworks " rel="91" style="background: url('img/01d-0.jpg?1353745136') no-repeat; background-size: cover; border: 1px solid #DCDDDE">
            <div class="pageimage-div-overlay">
                <a class="btn-storysetting" href="#"><span></span></a>
                <div class="storysettings_talkbubble_left settings-bubble border-radius-5 hidden talkbubble-padding">

基本的な問題は、div.story-in-myworks または div.pageimage-div-overlay をクリックしたときに、クリック イベント ハンドラーに影響しない別の動作が必要なことです。a.btn-storysetting

やりたかったこと

  1. カーソルが単一div.story-in-myworksの に移動すると、その上にオーバーレイが表示されますdiv (完了)
  2. カーソルがいずれかの に移動するdiv.story-in-myworksと、画像 ( btn-storysetting12x12.png) が右上隅に表示されます(完了) 。
  3. を左クリックするbtn-storysetting12x12.pngと、画像のすぐ隣にバブルが表示されます。（終わり）
  4. バブルが表示されると、選択div.story-in-myworksしたものは引き続きオーバーレイの外観を示します(完了)
  5. バブルが表示された後、ドキュメント内の他の場所を左クリックすると、バブルが閉じてdiv.story-in-myworks、オーバーレイのない通常の状態に戻ります(完了) 。
  6. バブルが表示された後、カーソルはバブルから離れることができ、バブルは表示されたままになり、選択したオーバーレイはdiv.story-in-myworks残ります。（終わり）
  7. バブルが 1 で開かれdiv.story-in-myworks、カーソルがbtn-storysetting12x12.pngANOTHERの を開くdiv.story-in-myworksと、前のバブルが消えて対応するオーバーレイが非表示になりますが、現在選択されdivているものにはオーバーレイがあり、現在選択されているものにバブルが表示されますdiv (完了) 。
  8. div.story-in-myworks前の 7 つの動作を変更せずに、別の Web ページに移動するなど、別の動作につながる をクリックできるようにしたいと考えています。

(完了)とマークされているものは完了していることに注意してください。こちらのデモをご覧ください。

やってみて得たもの

8をやろうとしましたが、ルール2 - 7はすぐに破られます。

必要なもの

他に何も壊すことなく、8 つの要件すべてに対応する方法。

よくある質問

  1. これはあなたの完全なアプリですか？

いいえ。できるだけ問題ステートメントに影響を与えずに、問題を説明するために不要なコードを可能な限り取り除いた縮小テスト ケースを実行しました。

デモの吹き出し内のリンクにスタイルが設定されていないことがわかります。

開示

  1. この同じ質問を css-tricks.com にクロスポストして、問題への注目を集めました。
4

1 に答える 1

2

以下のリンクでは、クリック イベントの発生元を特定し、それに応じて実行する方法について説明しています。

リンク

このコードは機能しているように見えますが、最初の読み込みで 2 回トリガーされる理由はわかりません。

$(".story-in-myworks").mouseenter(function(e){
    var currentStory = $(this);

    $(this).click(function(e){
        if ($(e.target).hasClass('pageimage-div-overlay'))
            alert('test');

        if ($(e.target).hasClass('btn-storysetting')){
            alert('test2');

        }
    });
});
于 2012-12-17T12:39:33.597 に答える