0

ネストされたliと、クリックされた要素のIDを取得することに問題があります。

これが私のコードであると仮定します:

<ul>
    <li id="folderLink_1">Link 1</li>
    <li id="folderLink_2">Link 2
        <ul>
            <li id="folderLink_3">Link 2.1</li>
            <li id="folderLink_4">Link 2.2</li>
        </ul>
    </li>
<ul>

私もこのjQueryを持っています:

$('[id^=folderLink_]').live('click',function(){
    alert($(this).attr('id'));
});

リンク 1 をクリックすると、folderLink_1 という 1 つの ID だけが通知されます。ただし、リンク 2.1 をクリックすると、folderLink_3 だけでなく、folderLink_2 も次々と取得されます。

私は周りを見回して、event.stopPropagation() を使用しようとしましたが、これにより、必要な後続のアクションも実行されなくなります。

アイデアは、フォルダが画像ライブラリのフォルダ構造として機能することです。フォルダーをクリックすると、そのフォルダーの ID が JS 変数に保存されます。画像が含まれるフォルダーをクリックすると、ajax はクエリ文字列の ID を使用して URL を取得します。

スパンの周りに LI 内のテキストをラップしようとしましたが、同じように動作する必要があるテキストの周りに画像があります (クリックした場合は ID を保存します)。

より良いヘルプのために画像を添付しました。

ステップ 1: 赤いセクションのメニュー項目をクリックします ステップ 2: リンクをクリックすると、そのフォルダーの ID が保存され、別のメニューが右にスライドします ステップ 3: 新しいメニューが古いメニューがあった場所にスライドし、フォルダー名が上部のカーボン ファイバー セクションに表示されます。

画像 1 (左上): 赤いセクションのメニュー項目をクリックします。

画像 2 (右上): リンクをクリックすると、そのフォルダーの ID が保存され、別のメニューが右にスライドします

画像 3 (左下): 新しいメニューが古いメニューがあった場所にスライドし、フォルダー名が上部のカーボン ファイバー セクションに表示されます。

新しいリンク (画像 3) がクリックされると、提供された画像の外側の領域にコンテンツが読み込まれるだけでなく、クリックされた LI の ID も記録されます。

クリックしたliのIDのみを保存するようにこれを取得するための提案があれば、大歓迎です。

4

4 に答える 4

1

タイプミスがあります：

alert($(this).attr('id');
------------------------^ Missing end braces.

それを次のように置き換えます。

alert($(this).attr('id'));

これを残して、クエリはイベントのバブルアップと関係があります。同じ種類のイベントを持つ別のli内部がある場合、この問題が発生します。li

次のように使用する必要があります。

$(document).on('click', '[id^=folderLink_]', function(e){
    alert($(e.target).attr("id"));
});

jsFiddleから、これを追加します。

$(document).on('click', '[id^=folderLink_]', function(e){
    alert($(e.target).attr('id'));
    return false;
});

更新されたfiddleを参照してください。

于 2013-01-28T08:13:13.707 に答える
1

非推奨のを使用する必要がありon()、実際にクリックされた要素の ID が得られます。live()e.target.id

$(document).on('click', '[id^=folderLink_]', function(e){
    if (this===e.target) alert(e.target.id);
});

フィドル

于 2013-01-28T08:14:59.313 に答える
1

そうすることで十分です

$('[id^=folderLink_]').click(function(e){
    alert($(this).attr('id'));
    e.stopPropagation()
});

http://jsfiddle.net/KTWnb/

于 2013-01-28T08:17:30.673 に答える
0

これを試して：

$('[id^=folderLink_]').on('click',function(e){
    e.stopPropagation();
    alert($(this).attr('id'));
});

e.stopPropagation()DOMツリーでバブリングするのを防ぎます。

ここでフィドル：http：//jsfiddle.net/JYcZS/

于 2013-01-28T08:26:47.200 に答える