Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2015, 16:37
Аспирант
Отправить личное сообщение для BARABANTEMO Посмотреть профиль Найти все сообщения от BARABANTEMO
 
Регистрация: 15.03.2012
Сообщений: 79

клик по ссылке и открытие блока
Всем привет. Пожалуйста подскажите как сделать так чтобы при нажатии на ссылку открывалось содержимое того дива на котором нажали - а то всё время открывается первый блок - при условии что таких дивов бывает разное количество.
<div class="bbCodeBlock"><div class="bbCodeName">имя 1</div><div class="codeMessage">содержимое 1</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 2</div><div class="codeMessage">содержимое 2</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 3</div><div class="codeMessage">содержимое 3</div></div>

<script type="text/javascript">
function page() {
var view = window.open("","view");
var code = document.querySelector('.codeMessage');
view.document.open();
view.document.write(code.innerText);
view.document.close();}
$('.bbCodeName').html('<a href="javascript:void(0)" onclick="page()">ОТКРЫТЬ</a>');
</script>

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2015, 17:39
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

BARABANTEMO,
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            border: 1px solid black;
        }

        div.bbCodeName {
            cursor: pointer;
        }
    </style>
    <title>Document</title>
</head>
<body>

<div class="bbCodeBlock">
    <div class="bbCodeName">имя 1</div><div class="codeMessage">содержимое 1</div></div>
<br>
<div class="bbCodeBlock">
    <div class="bbCodeName">имя 2</div><div class="codeMessage">содержимое 2</div>
</div>
<br>
<div class="bbCodeBlock">
    <div class="bbCodeName">имя 3</div><div class="codeMessage">содержимое 3</div>
</div>

<script>
    var names =  document.getElementsByClassName('bbCodeBlock');

    for (var i = 0; i < names.length; i++) {
        var el = names[i];
        el.addEventListener('click', function () {
            var codeMessage= this.getElementsByClassName('codeMessage')[0];

            codeMessage.style.display = (codeMessage.style.display == 'none')?'block':'none';

        })
    }
</script>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2015, 17:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,975

BARABANTEMO,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    var s = $(".bbCodeBlock");
    s.each(function(indx, el) {
            var text = $(".codeMessage", el).text();
        $(".bbCodeName", el).click(function() {
            var view = window.open("", "view");
            view.document.open();
            view.document.write(text);
            view.document.head.innerHTML = "<title>сайт</title>";
            view.document.close()

        }).text("ОТКРЫТЬ")
    })
});

  </script>
</head>

<body>
<div class="bbCodeBlock"><div class="bbCodeName">имя 1</div><div class="codeMessage">содержимое 1</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 2</div><div class="codeMessage">содержимое 2</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 3</div><div class="codeMessage">содержимое 3</div></div>

</body>

</html>

Последний раз редактировалось рони, 22.11.2015 в 19:32.
Ответить с цитированием
  #4 (permalink)  
Старый 22.11.2015, 18:39
Аспирант
Отправить личное сообщение для BARABANTEMO Посмотреть профиль Найти все сообщения от BARABANTEMO
 
Регистрация: 15.03.2012
Сообщений: 79

рони, большое спасибо всё работает а Mess4me наверно не понял мой вопрос но всё равно спасибо
Ответить с цитированием
  #5 (permalink)  
Старый 22.11.2015, 18:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,975

BARABANTEMO,
немного изменил смотрите код снова пост 3
Ответить с цитированием
  #6 (permalink)  
Старый 22.11.2015, 19:19
Аспирант
Отправить личное сообщение для BARABANTEMO Посмотреть профиль Найти все сообщения от BARABANTEMO
 
Регистрация: 15.03.2012
Сообщений: 79

рони, да посмотрел я конечно не понимаю в чём разница но буду пользоваться последним кодом - и ещё вопрос а как сделать чтобы в новом окне содержимое дива записывалось в body а в head например <title>сайт</title> спасибо и извините за беспокойство
Ответить с цитированием
  #7 (permalink)  
Старый 22.11.2015, 19:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,975

BARABANTEMO,
выше снова
Ответить с цитированием
  #8 (permalink)  
Старый 22.11.2015, 19:38
Аспирант
Отправить личное сообщение для BARABANTEMO Посмотреть профиль Найти все сообщения от BARABANTEMO
 
Регистрация: 15.03.2012
Сообщений: 79

рони, да всё в десятку ещё раз большое спасибо в долгу у ВАС
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Клик по ссылке присваивает класс модальному окну Павел Турченко jQuery 5 08.10.2015 14:51
Одновременное скрытие одного блока и открытие другого. Помогите решить задачу. Янковиц Элементы интерфейса 1 02.01.2015 23:43
Как реализовать клик по ссылке, ключ у которой меняется Mayskiykot Общие вопросы Javascript 4 11.12.2013 08:35
Как сделать клик по ссылке с другой ссылки или div ? ilyas-> Элементы интерфейса 15 01.08.2013 11:49
Клик по ссылке через каждое №-ое количество времени. lamer Элементы интерфейса 12 17.03.2012 08:17