0

同じクラスで div をネストしているという問題があります。たとえば、Panel の中に Panel のようなものがあります。ただし、最初のパネル内のパネルをクリックすると、最初のパネルがトリガーされます

 $(".panel").click

関数。ただし、マウスが実際にクリックしたパネルに何らかの方法でドリルダウンする必要があります。つまり、次のコードがあるとします。

 <div class="panel"> //first panel
      <div class="panel"> //second panel
      </div>
 </div>

2 番目のパネルでクリックをトリガーする場合は、代わりに親パネルでクリックをトリガーします。これは、2 番目のパネルが最初のパネルにラップされていることを考えると理にかなっています。しかし、これを回避する方法があるかどうか疑問に思っていましたか？理論的には、私が書いているコードは、他のパネル内に無限の量のパネルを持つことができます。マウスがクリックしたパネルまでドリルダウンする方法はありますか? (含まれているパネルではありません)

編集：

コード セグメント全体を次に示します。

<style type="text/css">
body
{
    height: 700px;

}
.gridSegment
{
            width: 50%;
    height: 50%;
    float: left;
    outline: 2px solid black;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    var lastID = 10;
     $(".gridSegment").dblclick(function(){
         console.log($(this).attr("ID"));
         lastID++;
         $(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
         lastID++;
         $(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
         lastID++;
         $(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
         lastID++;
         $(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
         return false;

     });
});
</script>
</head>
    <body>
    <div class='gridSegment'>
        <div class='gridSegment' id ="1"></div>
        <div class='gridSegment' id ="2"></div>
        <div class='gridSegment' id ="3"></div>
        <div class='gridSegment' id ="4"></div>
    </div>

</body>

4

3 に答える 3

2

jsFiddle でこの例を確認してください (JavaScript コンソールを開いてください)
(見苦しい色をお許しください - 私はデザイナーではなくプログラマーです ;)。 

$(function(){
    $('.panel').on('click',function(e){
       console.log($(this));
       return false;
    });
});​

クリックをキャプチャするときに false を返すだけで、イベントが含まれている要素にバブリングするのを停止できます。

于 2012-08-24T09:15:23.447 に答える
1

私はあなたのコードを少し変更する自由を取りました（例のためだけに）。主にループとid、もう少し情報を追加するために属性も変更しました。現在のレベルを正確に確認できます。ニーズに合っていると思われる場合は、ぜひアプリケーションに採用してください。

関数が問題を解決するとコメントで述べましたが、.live()この機能は jQuery 1.7 の時点で廃止されており、使用できない場合delegate()は代わりに関数を使用することをお勧めします。したがって、関数を使用した私のソリューションは次のとおりです。live()on()delegate()

ご覧のとおり、構文は似ていますが、コールバックをコンテナー要素にアタッチし、使用する内部セレクターを指定するだけです。この場合は任意の.gridSegment要素です。

$("#body").delegate(".gridSegment", "dblclick", function() {
     var $thisCached = $(this);
     console.log($thisCached,$(this).parent());
     var lastId = $thisCached.attr("id");
     var limit = 4;
     var counter = 1;
     while(counter <= limit){
       var newId = lastId + '_' + counter;
       counter++;    
       $thisCached.append("<div class='gridSegment' id='" + newId + "'></div>");         
     }
     return false;
});

私のラッパーはbodyのidを持つ要素であることに注意してください

jsFiddle の例

于 2012-08-24T11:02:40.457 に答える
0

ID を使用する

<div class="panel" id="panel_1">
    <div class="panel" id="panel_2">
...

または data-* 属性を使用します

<div class=panel data-pid=1>

それから

$('.panel').click(function(){
   alert('panel id is: '+$(this).attr('data-pid'));
})
于 2012-08-24T09:14:04.453 に答える