Форум

Stroy · #1 (**permalink**) 08.11.2014, 13:14

Есть файл с такой структурой

<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 · #2 (**permalink**) 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'));
}

рони · #3 (**permalink**) 08.11.2014, 13:47

Tecvid,

рони · #4 (**permalink**) 08.11.2014, 13:49

Сообщение от Stroy

измененное id

это что?

kostyanet · #5 (**permalink**) 08.11.2014, 13:54

Сообщение от Stroy

Есть файл с такой структурой

Сделайте другую структуру. Зачем самого себя загонять в задницу?

Stroy · #6 (**permalink**) 08.11.2014, 15:17

Сообщение от рони

это что?

При нажатии на ссылку в диве, я попадаю в другой див(с другим id),свойства которого мне и нужно поменять.

Stroy · #7 (**permalink**) 08.11.2014, 15:20

Сообщение от kostyanet

Сделайте другую структуру. Зачем самого себя загонять в задницу?

Каким образом Вы предлагаете поменять подобную структуру? Единственный вариант(который я вижу)-разбить на файлы. Но около 600 файлов вместо одного...

MallSerg · #8 (**permalink**) 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 · #9 (**permalink**) 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);

рони · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript