2 
<div class="myShips" id="161">
       <img src="img/ships/red/sc.png" id="Ship161" 
         style="-webkit-transform:     rotate(45deg);">
       <div class="hpBarRed"><div class="hpBarGreen" style="width:15px;">
       </div></div>    
</div>

クリックした .myShips div の ID で何かを行う JQ クリック関数が必要です。ただし、div 内の画像はその div と同じサイズなので、その上にあります。したがって、基本的には、その div の任意の場所をクリックして機能を有効にしたいと考えています (アラートと追加はテスト用です)。

$( '.myShips' ).click(function() {
    $("#hello").append("/*/");
    //alert($(this).attr('id'));
});

.myShips クラスの z-index を大きくしてみましたが、うまくいきませんでした。私の最良の選択肢は何ですか？画像用に別のクラスを追加してから、可能な 2 つの関数のうちの 1 つを呼び出す必要がありますか?

編集:問題は絶対配置にあります。.myShips は、絶対配置された別の div 内にあります。クリック用に同じ機能を追加しましたが、クリックされたすべての div 用です。したがって、画像をクリックすると、その ID は警告されず、.myShips ID も警告されませんが、その親 ID が警告され、その親であるさらに 2 つの div が警告されます。だから私は問題が位置にあると信じています：絶対

4

4 に答える 4

1

<img src="img/ships/red/sc.png" id="Ship161" />画像が絶対位置に設定されていないことを確認してください。

それが、この問題の可能性を確認する唯一の方法です。

于 2013-08-03T00:49:16.077 に答える
0

画像がクリックされたときに DOM 要素の上位の親を見つけるには、jQuery でclosest()関数を使用します。

$( document ).ready(function() {
    $('.myShips img').click(function(e){
       var image_id = $(this).attr('id');
       var ship_id = $(this).closest('.myShips').attr('id');
       console.log("ship:"+ship_id+" image:"+image_id);
    });
});
于 2013-08-03T00:58:38.593 に答える
0

クリック イベントが画像によってキャプチャされていない限り、イベントは dom に伝播し、ハンドラーをトリガーします。

ただし、画像にクリック ハンドラーがあり、何らかの理由でリファクタリングできない場合は、画像の位置を相対または絶対に設定すると仮定して、z-index を変更できます。 http://codepen.io/anon/pen/BycJz

于 2013-08-03T00:48:46.913 に答える