0

ユーザーが特定の行を強調表示できるようにする星付きのエントリのテーブルが生成されるGoogleリーダーの一部の機能を複製しています。また、ユーザーが行をクリックしてエントリを展開できるようにしたいと思います。行を展開するために、私のjqueryは次のように読み取ります。

$(".action_row").click(function() {
    if( $(this).next().is(':hidden') ) {
        $(".detailed_row").hide();
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(this).next().toggle('fast').addClass("selected-action");
        $(this).addClass("selected-action").attr("id", "current-action");
    } else {
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(".detailed_row").hide();
    }
});

クリック中に何が起こるかはそれほど重要ではありません。.action-rowをクリックするとイベントがトリガーされるだけです。

しかし、各アクション行の中には星があります。

$(".action-star").click(function() {    

    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("<i class='icon-star icon-large'></i>");
    } else {
        $(this).html("<i class='icon-star-empty icon-large'></i>");
    }               
});

ユーザーが星をクリックした場合、星だけを切り替えたいと思います。ただし、現在、スターがクリックされると、スタートグルとaction_rowイベントの両方がトリガーされます。

スターがクリックされた場合にaction_rowコードが使用されないように、コードを変更するにはどうすればよいですか？

4

1 に答える 1

1

stopPropagation（）およびstopImmediatePropagation（ ）について読む

イベントがスターからアクション行に向かって泡立ち、望ましくない影響を引き起こしているようです。

jquery：stopPropagationとstopImmediatePropagation

$(".action-star").click(function(e) {    
    e.stopPropagation(); // <-- top stop events from bubbling up
    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("<i class='icon-star icon-large'></i>");
    } else {
        $(this).html("<i class='icon-star-empty icon-large'></i>");
    }               
});
于 2012-08-16T17:58:51.310 に答える