Onclick change div style + onclick вне div удалить смену стиля

Я хотел бы изменить стиль на div с помощью onclick ... и удалить стиль, щелкнув где-нибудь за пределами div.Onclick change div style + onclick вне div удалить смену стиля

У меня есть следующая настройка кода ... может ли кто-нибудь помочь мне удалить стиль на divs, если вы щелкните в другом месте на странице?

<head> 
    <style type="text/css"> 
    .account{ 
     width: 100px; 
     height: 100px; 
     border: 1px solid #000; 
    } 
    .selected{ 
    border: 2px solid #F00; 
    } 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".account").click(function(){ 
    $(".selected").removeClass("selected"); 
    $(this).addClass("selected"); 
    }); 
    }); 
    </script> 
</head> 
<body> 
<h1>the test</h1> 
<div class="account">test 1</div> 
<div class="account">test 2</div> 
</body>

Благодарим за помощь, которую вы можете мне дать !!!

источник

2012-04-27 lbriquet

Попробуйте это.

$(document).ready(function(){ 
    $(".account").click(function(e){ 
     $(".selected").removeClass("selected"); 
     $(this).addClass("selected"); 
     e.stopPropagation();//This will stop the event bubbling 
    }); 

    //This event handler will take care of removing the class if you click anywhere else 
    $(document).click(function(){ 
     $(".selected").removeClass("selected"); 
    }); 
});

Работа демо - http://jsfiddle.net/yLhsC/

Обратите внимание, что вы можете использовать on или delegate для обработки нажмите на событие account элементов, если есть много на этой странице.

Нечто подобное.

Использование on при использовании JQuery 1.7+

$('parentElementContainingAllAccounts').on('click', '.account', function(e){ 
    $(".selected").removeClass("selected"); 
    $(this).addClass("selected"); 
    e.stopPropagation();//This will stop the event bubbling 
});

Использование delegate

$('parentElementContainingAllAccounts').delegate('.account', 'click', function(e){ 
    $(".selected").removeClass("selected"); 
    $(this).addClass("selected"); 
    e.stopPropagation();//This will stop the event bubbling 
});

источник

2012-04-27 14:44:29 ShankarSangoli

Большое спасибо за вашу помощь! Это сработало отлично! – lbriquet

Kool, отметьте его как ответ. – ShankarSangoli

Вы можете достичь этого поведения с прикрепление клик слушателя элемент тела, например:

$("body").click(function(){ 

});

источник

2012-04-27 14:31:14 bacardnumberone

этот обработчик еще будет срабатывать при нажатии на реальной цели. – Joseph

да, это правда ... извините, забыл упомянуть, что вам нужно будет добавить в div click handler return false; – bacardnumberone

Следующая следует сделать это:

$(document).on('click', function(e) { 
    if($(e.target).hasClass('account')) { 
     // do style change 
    } 
    else { 
     // undo style change 
    } 
});

Он связывает обработчик событий для всего документа, так что вы 'd имеют проблемы с любыми обработчиками событий на более конкретных элементах, которые вызывают e.stopPropagation().

источник

2012-04-27 14:32:01

Попробуйте это:

$(document).ready(function() { 

$('.account').click(function(e) { 
    e.stopPropagation(); 
    $(this).addClass("selected"); 
}); 


$(document).click(function(){ 
    $('.selected').removeClass('selected'); 
}); 
});

источник

2012-04-27 14:44:06 AwesomeUserName

Onclick change div style + onclick вне div удалить смену стиля

ответ

Смежные вопросы