Форум

faraday · #1 (**permalink**) 02.04.2012, 16:01

Здравствуйте, не могу решить элементарную задачу, есть страница с элементами. при щелчке на элемент у него появляется рамка, при повторном должна убираться.

<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
        		<script type="text/javascript">
				$('p').css('border','none');
				$('p').click(function(){
				alert(3);
				if($(this).css('border')=='none')
					$(this).css('border','1px solid black');
				else
					$(this).css('border','none');
					});
                </script>
</body>

Проую этот код, ничего не работает , если вызвать alert($(this).css('border')) элемента с границей, выдасться пустота.

Pavel M. · #2 (**permalink**) 02.04.2012, 16:38

лучше используйте классы и переключайте их

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>Test</title>
<style>
  .border {
    border: 1px solid black;
  }
</style>
</head>
<body>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <script>
    $('p').click(function () {
      $(this).toggleClass('border');
    });
  </script>
</body>
</html>

faraday · #3 (**permalink**) 02.04.2012, 17:03

да, спасибо, так работает:

if($(this).hasClass('sel0'))
											$(this).removeClass('sel0');
											else
											$(this).toggleClass('sel0');

но всё ранво проблемма стрнаная

Pavel M. · #4 (**permalink**) 02.04.2012, 17:37

если очень хочется использовать .css('border....')
то можно так

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script type="text/javascript">

$('p').click(function(){

  if($(this).css('border-left-style') !== 'solid')
      $(this).css('border','1px solid black');
  else
      $(this).css('border','none');
});
</script>

просто .css() возвращает то что возвращает getComputedStyle
а там обычно все разбито на отдельные элементы

Форум

Справочник

Discord чат

Курсы javascript