2011-12-28 47 views
0

属性を取得、私はこのコードを持っている:ターゲット要素のクリック、子要素、親が

$('p', 'div.playlist').click(function(e){ 
    if (e.target != this) { 
    val = $(this).parent().attr('songid'); 
    } else { 
    val = $(this).attr('songid'); 
    } 
    alert(val); 
}) 

これに対応:

<div class="playlist"> 
    <p songid="1">Song Name<span class="small"> by Artist Name</span> 
    </p> 
</div> 

を私の問題は、私はアーティスト名とスパンをクリックすることで、私はswfプレーヤーに渡すsongid属性を返していないので、プレイリストの最初の曲がデフォルトになりますが、残りの段落タグをクリックすると正しく動作します!

+1

プレイリスト?それは確かにUL要素の仕事です!だから、DIVの代わりにUL、そしてPの代わりにLIがあります。 (経験則は、あなたが兄弟であり、共通の行動/意味を持つ複数の要素を持っている場合はいつでも、ULを使いたいと思っています) –

+0

私は同意します。私はなぜPを使ったのか分からず、集中力が失われてしまった! –

答えて

3
$('p', 'div.playlist').click(function(e){ 
    var val = $(this).attr('songid'); 
    alert(val); 
}) 

あなたはP要素に結合されているので、あなたはそれが常にp要素である... thisある要素をチェックする必要はありません。あなたのコードは、ユーザーがSPAN要素またはP要素をクリックしたかどうかを判断しようとしていました。上記のコードでは、クリック気泡がP要素まで上がり、そこで処理されます。ここで

デモです:http://jsfiddle.net/PAZTs/

あなたはSPAN要素のクリックを禁止したい場合、あなたはそれらの要素のイベントハンドラでevent.stopPropagation()を使用することができます。ここでは

$('span', 'div.playlist').click(function(e){ 
    e.stopPropagation(); 
}); 

はデモです:http://jsfiddle.net/PAZTs/1/

また、あなたのclickイベントハンドラの内部では、val varを宣言すると、var keywoを使用せずにrds(var val;)これは、不要であるグローバル空間にval変数を置きます。

+0

私の元のコードがトップ1でした。問題は、ユーザーがp内のスパンをクリックしたときに、それがsongid属性を返さなかったことです。 –

+0

今私は愚かだと感じる。トラックの長さと位置が同じであれば、トラックを進めたのはActionScriptの問題でした。もちろん、曲がロードされる前の位置と長さは同じで、自動的に前進しました!それを今変更しました。正しい答えをくれました...まあ...そうです。 –

0

あなたは以下のように '最も近い' を使用することができます:私はon()data()を使用してい

$('p', 'div.playlist').click(function(){ 
    alert($(this).closest('p').attr('songid')); 
}); 
0
$("div.playlist").on("click", "p", function(){ 
    var attr = $(this).closest("div.playlist").data("songid"); 
}); 

お知らせ。 data-が前に付いていない限り、HTMLでカスタム属性を使用することはできません。これはHTML5で追加されました。

このコードでは、のdivにある任意のp要素にクリックハンドラをアタッチします。ハンドラは親divをとり、data-songidの値を取得します。

関連する問題