Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2013, 11:51
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

Как узнать id элемента, по которому кликнул?
Здравствуйте, есть список:

<div id='1' class='button_block'>Блок с новостями 1</div>
<div id='2' class='button_block'>Блок с новостями 2</div>
<div id='3' class='button_block'>Блок с новостями 2</div>
...


Нужно, чтобы при нажатии на каждый из них появлялось окно, открывается оно с помощью такого кода (я его тестировал, он работает):

$('.content').css("display","block");


А вот и блок который открывается:

<div id='news' class='content' style='display: none;'>
  ТЕКСТ    
</div>



Раньше, когда у меня был только один блок, который нужно было открывать, все работало хорошо. Теперь у меня несколько блоков, которые должны открываться при клике на свою ссылку.


Думал решить эту задачу таким путем, но не получается:
(Ошибика где-то в этом коде..)

<script>
  $(document).ready(function(){
    $(".button_block").click(function (){
    var = idClick;
    idClick = $(this).attr('id');
    if(idClick == 1) $('#news').css("display","block");
    if(idClick == 2) $('#chat').css("display","block");
    });
  });
</script>



<div id='news' class='content' style='display: none;'>
  ТЕКСТ    
</div>

<div id='chat' class='content' style='display: none;'>
  ТЕКСТ    
</div>


Помогите пожалуйста)

Последний раз редактировалось Vladislav, 29.03.2013 в 11:54.
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2013, 12:22
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Vladislav
var = idClick
Это че ваще такое?

Сообщение от Vladislav
$(this).attr('id')
Тебе нужно срочно лечиться. Ставлю диагноз - jquery головного мозга.
Повторяй на ночь:
this.id, this.id, this.id ...

Сообщение от Vladislav
    if(idClick == 1) $('#news').css("display","block");
    if(idClick == 2) $('#chat').css("display","block");
Нихао наш китайский друг!

Можно сделать в десять раз проще и короче:
var map = ['news', 'chat'];

var id = 1; alert( '#' + map[id-1] );
var id = 2; alert( '#' + map[id-1] );
Ответить с цитированием
  #3 (permalink)  
Старый 29.03.2013, 12:52
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

Ой реально что-то я с "var = idClick" затупил жестко.

Разъясни, что будет делать твой код:

var map = ['news', 'chat'];

var id = 1; alert( '#' + map[id-1] );
var id = 2; alert( '#' + map[id-1] );


Этот код не будет же выполнять ту функцию, которая мне нужна?
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2013, 14:04
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Vladislav
Разъясни, что будет делать твой код:
Ты впервые в жизни видишь массив? Значит ты упустил что-то очень важное в процессе изучения javascript...

<div id='1' class='button_block'>Блок с новостями 1</div>
<div id='2' class='button_block'>Блок с новостями 2</div>
<div id='3' class='button_block'>Блок с новостями 2</div>
<div id='news' class='content' style='display: none;'>
  ТЕКСТ  news  
</div>
 
<div id='chat' class='content' style='display: none;'>
  ТЕКСТ  chat
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
(function(){
    var idMap = ['news', 'chat', 'news'];
    $(".button_block").click(function (){
        $('#' + idMap[ this.id - 1 ]).show();
    });
})();
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 29.03.2013, 14:19
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

1) Спасибо все работает, только вот этот код работает, когда я <script> вставляю после разметки html, а когда в начале, например, в <head>, то код <script> не работает. Разве это существенно? Я где-то читал, что все скрипты должны быть в <head>

2) Посоветуйте сайты, где можно обучиться js. Спасибо еще раз!
Ответить с цитированием
  #6 (permalink)  
Старый 29.03.2013, 14:34
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

А меню в шапке это страницы вам не подходит?
Ответить с цитированием
  #7 (permalink)  
Старый 29.03.2013, 14:40
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Vladislav
Я где-то читал, что все скрипты должны быть в <head>
Это не так. Тег <script> может быть как в head, так и в body.
Я обычно размещаю все скрипты конце body - так страница отображается существенно быстрее.
Ответить с цитированием
  #8 (permalink)  
Старый 29.03.2013, 16:04
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

спасибон большой) к вам прислушаюсь!
Ответить с цитированием
  #9 (permalink)  
Старый 26.05.2015, 10:14
Интересующийся
Посмотреть профиль Найти все сообщения от stomaks
 
Регистрация: 26.05.2015
Сообщений: 11

Нужна помощь, антологичная проблема
В js я профан, только учусь, у меня есть код:
window.onload = function() {
  document.getElementById("item0").onclick = function() {
    if (chrome.app.window.get("WindowsStarted").getBounds().height != 40) {
      chrome.app.window.get("WindowsStarted").setBounds({"height": 40});
      document.getElementById("content0").style.display = "none";
      document.getElementById("content1").style.display = "none";
      document.getElementById("content2").style.display = "none";
      document.getElementById("content3").style.display = "none";
      document.getElementById("content4").style.display = "none";
      document.getElementById("content5").style.display = "none";
      document.getElementById("content6").style.display = "none";
    }
       else {
         chrome.app.window.get("WindowsStarted").setBounds({"height": 250});
         document.getElementById("content0").style.display = "block";
       }
  };
  
};



Все работает, но у меня еще есть
item0
item1
item2
item3
item4
item5
item6
и
content0
content1
content2
content3
content4
content5
content6

Не хочу писать для каждого item2 такой же код как я привел выше, может можно как-то получит id элемента на который пользователь кликнул?

Это все что надо.
Буду признателен за помощь.
Ответить с цитированием
  #10 (permalink)  
Старый 26.05.2015, 14:31
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от stomaks
как-то получит id элемента на который пользователь кликнул?
Это всегда this.id если обработчик на самом элементе, или event.target.id если на родителе каком-то выше по иерархии.

Однако нужно еще сегрегировать родителя от его отпрысков, например так

if(event.target!==this)

Последний раз редактировалось kostyanet, 26.05.2015 в 14:34.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как узнать ID выделенного элемента в форме? Diger Events/DOM/Window 4 19.11.2012 07:36
Как узнать имя элемента syegorius Events/DOM/Window 3 12.10.2011 18:07
Как менять позицию элемента? Заданую через position:absolute; left:100px; top:200px; aRpi Общие вопросы Javascript 3 24.04.2011 08:42
как от элемента отвязать функцию syegorius jQuery 1 10.04.2011 22:05
Как узнать индекс элемента над которым находится курсор Zhazhah jQuery 2 28.03.2011 23:30