Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Работа с якорями или с id? (https://javascript.ru/forum/misc/51484-rabota-s-yakoryami-ili-s-id.html)

Stroy 08.11.2014 13:14
Работа с якорями или с id?
 
Есть файл с такой структурой
<div class="game" id="a1">Какой-то текст1
<a href="#a2">Ссылка2</a>
<a href="#a3">Ссылка3</a>
</div>
<div class="game" id="a2">Какой-то текст2
<a href="#a3">Ссылка3</a>
<a href="#a1">Ссылка1</a>
</div>
<div class="game" id="a3">Какой-то текст3
<a href="#a4">Ссылка4</a>
<a href="#a2">Ссылка2</a>
</div>
<div class="game" id="a4">Какой-то текст4
<a href="#a2">Ссылка2</a>
<a href="#a1">Ссылка1</a>
</div>

Как получить измененное id, при переходе по якорю чтобы потом произвести с div'ом какие-то действия?
Пробовал сделать это при помощи якорей, но показывает якорь того div'a в котором нажимается на ссылку. Подскажите. Заранее благодарен.

Tecvid 08.11.2014 13:37
html
<div class="game" id="a1">Какой-то текст1
<a href="#a2">Ссылка2</a>
<a href="#a3">Ссылка3</a>
</div>
<div class="game" id="a2">Какой-то текст2
<a href="#a3">Ссылка3</a>
<a href="#a1">Ссылка1</a>
</div>
<div class="game" id="a3">Какой-то текст3
<a href="#a4">Ссылка4</a>
<a href="#a2">Ссылка2</a>
</div>
<div class="game" id="a4">Какой-то текст4
<a href="#a2">Ссылка2</a>
<a href="#a1">Ссылка1</a>
</div>


js

document.getElementsByTagName('a').onclick = function () {
	document.getElementsByClassName('game').setAttribute('id', this.getAttribute('href'));
}

рони 08.11.2014 13:47
Tecvid,
:blink:

рони 08.11.2014 13:49
Цитата:
Сообщение от Stroy
измененное id
это что?

kostyanet 08.11.2014 13:54
Цитата:
Сообщение от Stroy
Есть файл с такой структурой
Сделайте другую структуру. Зачем самого себя загонять в задницу?

Stroy 08.11.2014 15:17
Цитата:
Сообщение от рони (Сообщение 339758)
это что?
При нажатии на ссылку в диве, я попадаю в другой див(с другим id),свойства которого мне и нужно поменять.

Stroy 08.11.2014 15:20
Цитата:
Сообщение от kostyanet (Сообщение 339759)
Сделайте другую структуру. Зачем самого себя загонять в задницу?
Каким образом Вы предлагаете поменять подобную структуру? Единственный вариант(который я вижу)-разбить на файлы. Но около 600 файлов вместо одного...

MallSerg 08.11.2014 15:33
Цитата:
Сообщение от Stroy
свойства которого мне и нужно поменять
Что это подразумевает?
если нужно изменить стили у этого div то существует селектор target
<p data-height="348" data-theme-id="0" data-slug-hash="EoBJF" data-default-tab="result" data-user="elad2412" class='codepen'>See the Pen <a href='http://codepen.io/elad2412/pen/EoBJF/'>CSS Target Event</a> by Elad Shechter (<a href='http://codepen.io/elad2412'>@elad2412</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Tecvid 08.11.2014 15:50
Цитата:
Сообщение от Stroy
Каким образом Вы предлагаете поменять подобную структуру?
лично я предлагаю изменить на вот такую структуру
<div class="game" id="a1">Какой-то текст1
	<a href="?id=a2">Ссылка2</a>
	<a href="?id=a3">Ссылка3</a>
	</div>
	<div class="game" id="a2">Какой-то текст2
	<a href="?id=a3">Ссылка3</a>
	<a href="?id=a1">Ссылка1</a>
	</div>
	<div class="game" id="a3">Какой-то текст3
	<a href="?id=a4">Ссылка4</a>
	<a href="?id=a2">Ссылка2</a>
	</div>
	<div class="game" id="a4">Какой-то текст4
	<a href="?id=a2">Ссылка2</a>
	<a href="?id=a1">Ссылка1</a>
	</div>


а потом получить данные из запроса get посредством js
var get = {};

	if (location.search) {
		var c = location.search.substring(1).split('&');
		
		for (var i = 0; i < c.length; i++) { 
			var ar = c[i].split('=');
			
			if (ar[0] != '') {
				get[ar[0]] = unescape(ar[1]);
			}
		}
	}
	
	var id = get['id'];


и затем поставить переменную id в атрибут id, советую с помощью jquery, так вроде проще

$('.game').attr('id', id);

рони 08.11.2014 15:55
Stroy,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .orange {
    background: #FFCC00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".game");
	   s.find('a').click(function() {
	     var target = this.hash;
	     s.not(target).removeClass("orange"); // .not(target) можно убрать
	     $(target).toggleClass("orange");
      });
});
  </script>
</head>

<body>
<div class="game" id="a1">Какой-то текст1
<a href="#a2">Ссылка2</a>
<a href="#a3">Ссылка3</a>
</div>
<div class="game" id="a2">Какой-то текст2
<a href="#a3">Ссылка3</a>
<a href="#a1">Ссылка1</a>
</div>
<div class="game" id="a3">Какой-то текст3
<a href="#a4">Ссылка4</a>
<a href="#a2">Ссылка2</a>
</div>
<div class="game" id="a4">Какой-то текст4
<a href="#a2">Ссылка2</a>
<a href="#a1">Ссылка1</a>
</div>

</body>

</html>

Stroy 08.11.2014 18:43
Tecvid,
Извините, но выход указанный рони мне больше по душе)
рони
Огромное спасибо)

Tecvid 10.11.2014 13:26
Цитата:
Сообщение от Stroy
Извините, но выход указанный рони мне больше по душе)
ну это ваше право) никто ж не заставляет :)


Часовой пояс GMT +3, время: 11:06.