Форум

OdessaNa · #1 (**permalink**) 12.07.2014, 10:29

Здравствуйте, друзья.
Есть вот такой код:

$('#div_for_img').toggle(function(e){
        if(e.shiftKey){
            $(this).css('border', '4px solid #cc0000');
        }
        else {
            $(this).css('border', '4px solid #333333');
        }
    },
    function() {
        $(this).scc('border', 'none');          
    }
)

При перезагрузке страницы эл-т $('#div_for_img') "исчезает" со страницы. Но мне нужно, что бы он не исчезал, а выполнял следующее:
1. при нажатии на любой из наследников данного эл-та - вокруг него должна появиться рамка (цвет рамки зависит от нажатия клавиши shift);
2. при повторном нажатии на этого же наследника - рамка должа "исчезнуть";

Почитав информацию по методу toggle() - я так понял, что он не подходит для моей задачи. Подскажите, пожалуйста, что использовать для решения.

Заранее благодарю.

рони · #2 (**permalink**) 12.07.2014, 20:51

OdessaNa,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #div_for_img img.border{
    border: 4px solid;
  }
  #div_for_img img{
     border: none;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var $img = $('#div_for_img img');
	   $img.on('click', function(e) {
       $(this).toggleClass('border').css('borderColor', e.shiftKey ? '#cc0000' : '#333333')
	   ;
      });
});
  </script>
</head>

<body>
<div id='div_for_img'>
<img src="http://javascript.ru/img/ws_1.png" alt="">
<img src="http://javascript.ru/img/ws_1.png" alt="">
</div>
</body>
</html>

OdessaNa · #3 (**permalink**) 13.07.2014, 08:21

рони,
спасибо!!!

Форум

Справочник

Discord чат

Курсы javascript