0

複数の div を持つ Web ページがあります。ユーザーが本文をクリックすると、すべての div 要素の境界線が赤に変わります。ただし、ユーザーが div をクリックすると、その div のみが境界線を青に変更します。他のすべての div 要素は赤い境界線のままになります。これはこれまでの私のコードです:

$('body').click(function() {
    var $target = $(event.target);
    if (!target.closest($('div')).length) {
        //I want the border of all div on the page to change to red
        $('div'). css('border', '2px solid red');
    } else if (target.closest($('div')).length) {
        //Here just the div that was clicked on will have its border changed to blue
        $(this).css('border', '2px solid blue');
    }
});
4

4 に答える 4

3

これを試してください - http://jsfiddle.net/74pzJ/4/

$('body').on("click", function(e) {
    $("div").css('border', '2px solid red');
    $(e.target).closest("div").css('border', '2px solid blue');
});

ドキュメンテーション

于 2012-07-27T16:16:35.423 に答える
0 
$('body').click(function() {
    $('div').css('border', '2px solid red');    
});

$('div').click(function(e){
    $(this).css('border', '2px solid blue');
    e.stopPropagation();
});
​
于 2012-07-27T16:15:15.527 に答える
0

次のコードを使用して、firebug などの html タグを強調表示できます。多分これはあなたにとって役に立ちます。

    document.getElementById('clickable_content').addEventListener("mouseover", function(e) {
        e.stopPropagation();
        e.target.addEventListener("mouseout", function (e) {
            e.target.className = e.target.className.replace(new RegExp(" highlight\\b", "g"), "");
        });
        e.target.addEventListener("click",function(e){
            alert(e.target.className); // clicked div or what ever
        });
        e.target.className += " highlight";
    });
于 2012-07-27T16:45:21.290 に答える
0

ここで jquery.. の event.stopPropagation() メソッドを関数で使用する必要があります

クリックイベントが他のdivにバブリングしているため

于 2012-07-27T16:09:02.390 に答える