Как узнать 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> Помогите пожалуйста) |
Цитата:
Цитата:
Повторяй на ночь: this.id, this.id, this.id ... Цитата:
Можно сделать в десять раз проще и короче: var map = ['news', 'chat']; var id = 1; alert( '#' + map[id-1] ); var id = 2; alert( '#' + map[id-1] ); |
Ой реально что-то я с "var = idClick" затупил жестко.
Разъясни, что будет делать твой код: var map = ['news', 'chat']; var id = 1; alert( '#' + map[id-1] ); var id = 2; alert( '#' + map[id-1] ); Этот код не будет же выполнять ту функцию, которая мне нужна? |
Цитата:
<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>
|
1) Спасибо все работает, только вот этот код работает, когда я <script> вставляю после разметки html, а когда в начале, например, в <head>, то код <script> не работает. Разве это существенно? Я где-то читал, что все скрипты должны быть в <head>
2) Посоветуйте сайты, где можно обучиться js. Спасибо еще раз!:) |
А меню в шапке это страницы вам не подходит?
|
Цитата:
Я обычно размещаю все скрипты конце body - так страница отображается существенно быстрее. |
спасибон большой) к вам прислушаюсь!
|
Нужна помощь, антологичная проблема
В 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 элемента на который пользователь кликнул? Это все что надо. Буду признателен за помощь. |
Цитата:
Однако нужно еще сегрегировать родителя от его отпрысков, например так if(event.target!==this) |
Спасибо за ответ, но у меня не получается внедрить его в свой код.
Вот полный код:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="common.js"></script>
</head>
<body>
<table>
<tr>
<td id="item0">
<iframe src="content0.html" id="content0"></iframe>
</td>
<td id="item1">
<iframe src="content1.html" id="content1"></iframe>
</td>
<td id="item2">
<iframe src="content2.html" id="content2"></iframe>
</td>
<td id="item3">
<iframe src="content3.html" id="content3"></iframe>
</td>
<td id="item4">
<iframe src="content4.html" id="content4"></iframe>
</td>
<td id="item5">
<iframe src="content5.html" id="content5"></iframe>
</td>
<td id="item6">
<iframe src="content6.html" id="content6"></iframe>
</td>
<td id="item7">
<div id="content7"></div>
</td>
</tr>
</table>
</body>
И соответственный ему js
window.onload = function() {
var content_height = 500;
document.getElementById("item0").onclick = function() {
document.getElementById("content0").style.display = "block";
};
document.getElementById("item1").onclick = function() {
document.getElementById("content1").style.display = "block";
};
document.getElementById("item2").onclick = function() {
document.getElementById("content2").style.display = "block";
};
document.getElementById("item3").onclick = function() {
document.getElementById("content3").style.display = "block";
};
document.getElementById("item4").onclick = function() {
document.getElementById("content4").style.display = "block";
};
document.getElementById("item5").onclick = function() {
document.getElementById("content5").style.display = "block";
};
document.getElementById("item6").onclick = function() {
document.getElementById("content6").style.display = "block";
};
document.getElementById("item7").onclick = function() {window.close();};
};
(я упростил код, оставил только то, что касается моего вопроса.) |
Я пытался сделать так (вставив this.id вместо item0 - item6, но так не работает):
document.getElementById( this.id ).onclick = function() {
document.getElementById("content0").style.display = "block";
};
Спасибо. |
Небось кликать некуда пока ячейка пустая.
Что вы там вообще городите? |
Это важно, иначе фиг поймешь ваше ТЗ, а программист это извините не заказчик который имеет право быть невменяемым, или платите деньги чтобы стать заказчиком и обрести сие право.
Обычно делается так. На коренной элемент вешается обработчик щелчка и этот обработчик представляет из себя контроллер, ну или роутер, я так и не понял до сих пор разницы.
var toggle=function(e){
var el=e.target;
if(el.nodeName=='TD')
el.querySelector('iframe').style.display='block';
};
window.addEventListener('load',function(){
var table = document.getElementById('table_id');
table.addEventListener('click',toggle);
});
|
| Часовой пояс GMT +3, время: 13:05. |